Question

我想将容器拆分为3行。第一行有2列（并排显示2个元素）。

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

第三行有2列（类似于第一行。）

这是我的父容器：

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

}

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

由于

Answer 1

以下是您所描述的内容：http://jsfiddle.net/fvGMb/

您需要拥有设置宽度的行，然后您可以在这些行中包含用于描述您喜欢的宽度的百分比的列。列需要浮动。

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>

如何将容器拆分为多行，其中每行具有不同的列

1 个答案: