html - 我如何将盒子放在盒子模态 css 中另一个盒子的底部

Question

<div class="cat-left">
</div>
<div class="cat-right">
</div>

.cat-left {
float: left;
width: 233px;
border: 1px solid #c5c5c5;
}
.cat-right {
margin-left: 12px;
float: left;
}

我写这篇文章是为了制作两个盒子(一个在左边，一个在右边)。现在我想再做一个

<div class="cat-left"></div> 

如果我将 cat-left 放在 cat-left 之后，那么它会显示在第一个 cat-left 的右侧。你已经看到我使用了边框。他们是否可以选择将其置于现有 cat-left 的底部。

检查 http://s7.postimage.org/3t6rfpdih/demo.png弄清楚我到底想要什么我的代码。

我试过给第二个 cat-left 绝对位置，但不确定在不设置像素边距的情况下它对我有何帮助。

Answer 1

您需要像这样在 cat-left 框中包含两个子 div:

<div class="cat-left">
    <div class="cat-left-inner">
        Left top
    </div>
    <div class="cat-left-inner">
        Left bottom
    </div>
</div>
<div class="cat-right">
    Right
</div>

在哪里

.cat-left-inner {
    height: 10em;
}

您需要为您的 div 提供设置的高度，以使它们以所需的方式填充它们的容器。有关更具体的示例，请参阅此 fiddle :http://jsfiddle.net/A6axj/2/ .