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以找出我想要的代码到底是什么。

我尝试将绝对位置赋予第二只左猫，但不确定在不以像素为单位设置边距的情况下它如何帮助我。

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 提供设置的高度，以使它们以所需的方式填充其容器。有关更具体的示例，请参见此小提琴：http: //jsfiddle.net/A6axj/2/。