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-->

如您所见，我设置了带有“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;
}

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