Question

为什么方框B在下面的代码中包围方框A？是不是要在盒子A上漂浮，以使它们水平对齐？

<div style="width:300px">
    <div style="width:45%;margin:5px;float:left;border:1px solid black">
    <p>Box A</p>
    This is just content for box A.
    </div>
    <div style="width:45%;margin:5px;border:1px solid red">
    <p>Box B</p>
    This is just content for box B.
    </div>
</div>

http://jsfiddle.net/VCr8y/

Answer 1

通过将float: left添加到第一个div，您实际上是从页面流中删除它，但是不会从页面流中删除框B.但是，框B不能让文本在框A中运行，所以它只是“围绕”它，就像你在JSFiddle中看到的那样。你应该做的是浮动框B，并在之后应用一个清除（或another clearfix solution），这样你的两个div就不会被div包围：

<div style="width: 300px;">
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid black;">
    <p>Box A</p>
    This is just content for box A.
    </div>
    <div style="width: 45%; margin: 5px; float: left; border: 1px solid red;">
    <p>Box B</p>
    This is just content for box B.
    </div>
</div>
<div style="clear: both;"></div>

Here's a JSFiddle.顺便说一句，使用类可能会有所帮助。

水平对齐两个DIV

1 个答案: