html - Div 网格单元格类型对齐

Question

我的目标是类似这样的设置：

不幸的是，我最终得到了这个：

这是我的规格：

我试图让带有图像的 div 设置为无边框，并让带有文本的 div 具有 1 px 的边框。

这是我设置的div：

<section id="row2">

    <div id="textBox1" class="column left">
        <p> TEXT BOX 1 </p> 
    </div> <!--#textBox1 .column.left-->

    <div class="column right">
                <img src="assets/top-right-image.png"/>
            </div>

</section> <!--#row2-->

<section id="row3">

    <div class="column left"><img src="assets/bottom-left-image.png"/></div>

    <div id="textBox2" class="column right">
        <p> TEXT BOX 2 </p>
    </div>

</section> <!--#row3-->

如您所见，我设置了 id 为“textBox1”和“textBox2”的文本 div。不幸的是，这会炸毁它们并使#row3 中的 div.column.left 与右侧对齐。

这是CSS：

.column {
     float: left;
     position: relative;
     margin: 20px 11px;
}

.left {
     width: 408px;
}

.right {
     width: 449px;
}

#bannerPic {
     padding: 0px 15px;
}

#row2 div {
     height: 352px;
}

#row3 div {
     height: 598px;
}

#textBox1 {
    border: 1px solid #BCBCBC;
    margin-bottom: 20px;
}

#textBox2 {
    border: 1px solid #BCBCBC;
}

我哪里错了？

Answer 1

很可能前两个项目的高度不完全相同，所以第三个项目，较高的照片，是“悬挂”在第一个项目上。发生这种情况是因为浮动行为的工作方式。确保每一行的部分（div）被渲染到完全相同的高度，包括所有的边框、边距、填充等。

另一个选项是“清除”部分标签。由于您的部分内容是文本，这可能会容易得多。无论如何，这可能更容易。:)

section { clear: both }

Answer 2

尝试添加样式级联：

section {
  clear: both;
}

清除浮动并将每一行重置为边距。