Question

我有两个div和一个包装div。

包装器div的宽度为950px。包装器内的第一个DIV宽度为450px。

最后一个div应该根据剩下的空间进行调整。这是500px。

当我在最后一个DIV中显示一个段落，并且文本超过div的宽度时，它会将div放在一个新行上，而不是将文本放在一个新行上。 div将扩展到950px。

我正在使用float: left;

我如何解决这个问题，以便该段落在最后一个DIV中新建一行？

Answer 1

只需将宽度：500px添加到最后一个div。

Answer 2

您可以这样写：

.wrapper{
    overflow:hidden;
    width:950px;
    border:1px solid red;
}
.first, .second {
    float:left;
}
.first{
    height:200px;
    width:450px;
    background:red;
}
.second{
    max-width:500px;
    height:200px;
    background:green;
}

检查一下：

http://jsfiddle.net/TbRuB/6/

<强>已更新

动态方式

选中此http://jsfiddle.net/TbRuB/

Answer 3

如果你漂浮两个内部div，你可以从第二个中移除浮子;这将解决您的问题：第二个div中的文本将显示在第一个div的右侧，即使文本长于一行。

否则，我们可能需要更多信息，例如您拥有的其他样式，您遇到问题的浏览器等等。

当使用浮动时，如何使<p>切换到DIV中的新行，当文本超出宽度时</p>

3 个答案: