我很抱歉可怕的头衔.
本质上,我有一个包含div的包含两个div的位置：relative;和float：left ;.第一个div设置为200px(凭借其内容),因为它将包含的所有内容并不意味着宽度增长.
然而,第二个div我只想增加到包含div的一边.包含的div没有设置宽度,因为我的屏幕垂直,我知道大多数人有他们的水平.我在多台电脑上测试,所以我知道这两个版本的外观.
然而,回到第二个div,如果我把一个短语比其他的包含div更长,那么第二个div就会降到第一个div的下面.我不希望这个第二个div有一个设置的宽度,所以有一种方法来设置一个最大宽度？如果是这样,有没有办法将它设置为任何包含的div已经留下了？我真的不想拉屏幕分辨率,没有,所以希望有另一种方式.
感谢您的帮助.
解决方法
overflow is the magic word.
你可以使用它来摆脱这个丑陋的清除div,并让第二个div占用浮动旁边的任何空间.
另外,你的CSS中的.content div：最后一个孩子的规则适用于空的清除div,而不是你的第二列,所以它实际上并没有做任何事情.
这就是它的样子(和updated fiddle)：
<!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>
