html - 如何将一个容器分成多行，每行有不同的列

Question

我想将一个容器分成 3 行。其中第一行有 2 列(并排显示 2 个元素)。

第二行有 3 列，第三列再次分成两列，比如 23a 和 23b。 23b 再次有 2 行。

第三行有 2 列(与第一行类似。)

这是我的父容器:

.container
{
position:fixed;
margin-top:-325px;
width:75%;
height:75px;
background-color:#300000;

}

我尝试了多种组合。但没有成功实现我想要的。有人可以帮帮我吗？

谢谢

Answer 1

这是您所描述内容的一部分:http://jsfiddle.net/fvGMb/

您需要让行具有设定的宽度，然后您可以让这些行中的列具有描述您希望的宽度的百分比。列需要 float 。

CSS

.col {
    float: left;
}
.row {
    width: 100%;
}
.half {
    width: 50%;
}
.third {
    width: 33.33%;
}

HTML

<div class="row">
    <div class="col half">
    </div>
    <div class="col half">
    </div>
</div>
<div class="row">
    <div class="col third">
    </div>
    <div class="col third">
    </div>
    <div class="col third">
        <div class="col half">
        </div>
        <div class="col half">
        </div>
    </div>
</div>