我很抱歉这个可怕的标题。
本质上，我有一个包含div其中包含两个divs with position: relative; and float: left;。首先div被设定为200px（凭借其内容）因为它所包含的所有内容并不意味着宽度方向增长。
然而，第二个div我只想生长到包含的一侧div。含有的div没有固定的宽度，因为我的屏幕是垂直的，而且我知道大多数人的屏幕都是水平的。我在多台计算机上测试了它，所以我知道它在两个版本中的样子。
不过，回到正题，在第二个div，如果我输入的短语比其余包含的短语长div，然后是第二个div跌至第一个以下div。我不想要这一秒div有一个设置的宽度，那么有没有办法设置最大宽度？如果是这样，有没有办法将其设置为包含的内容div已经离开了？我真的不想拉屏幕分辨率之类的，所以希望有另一种方法。
感谢您的帮助。
减少 jsFiddle.net 上的代码和 CSS http://jsfiddle.net/XstreamINsanity/zrfzP/
overflow这是一个神奇的词。 http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
您可以使用它来摆脱那个丑陋的清除 div，并让第二个 div 占据浮动旁边剩余的空间。
另外，.content div:last-childCSS 中的规则适用于空的清除 div 而不是第二列，因此它实际上没有执行任何操作。
这就是它的样子（以及更新了小提琴 http://jsfiddle.net/zrfzP/1/):
<!doctype html>
<style>
.content {
margin: 10px;
padding: 0;
border: 1px solid black;
overflow: hidden; /* replaces <div class="clear"/> */
}
.columns {
position: relative;
float: left;
padding-right: 20px;
margin-bottom: 10px;
}
.c2 {
float: none; /* Don't float this column... */
overflow: hidden; /* ... Create a new block formatting context instead */
padding-right: 10px;
word-wrap: break-word;
}
</style>
<div class="content">
<div class="columns">
<img src="#" height="200px" width="200px" />
</div>
<div class="columns c2">
TestingTestingTestingTesting
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
