html – 使div浮动留下,但如果文本太长,则不会“下降”

我很抱歉可怕的头衔.

本质上,我有一个包含div的包含两个div的位置：relative;和float：left ;.第一个div设置为200px(凭借其内容),因为它将包含的所有内容并不意味着宽度增长.

然而,第二个div我只想增加到包含div的一边.包含的div没有设置宽度,因为我的屏幕垂直,我知道大多数人有他们的水平.我在多台电脑上测试,所以我知道这两个版本的外观.

然而,回到第二个div,如果我把一个短语比其他的包含div更长,那么第二个div就会降到第一个div的下面.我不希望这个第二个div有一个设置的宽度,所以有一种方法来设置一个最大宽度？如果是这样,有没有办法将它设置为任何包含的div已经留下了？我真的不想拉屏幕分辨率,没有,所以希望有另一种方式.

感谢您的帮助.

Cut down code and CSS on jsFiddle.net

解决方法

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>

html – 使div浮动留下,但如果文本太长,则不会“下降”

解决方法

相关推荐