Question

请参阅以下codepen for demo：http://codepen.io/anon/pen/PGPJOG

<div class="col-1-3 bg-green">green</div>

<div class="col-1-3 bg-green">

    <div class="col-1-3 bg-blue">
        blue<br/>blue<br/>blue<br/>blue<br/>
    </div>
    <div class="col-1-3 bg-blue">
        blue
    </div>
    <div class="col-1-3 bg-blue">
        blue
    </div>

</div>

<div class="col-1-3 bg-green">green</div>

<div class="col-1-3 bg-pink">pink</div>
<div class="col-1-3 bg-pink">pink</div>
<div class="col-1-3 bg-pink">pink</div>

我有两行/几组单元格，第一行/每组有绿色背景，第二行有粉红色。在第一行/每组中的一个单元格（第二个）中，绿色的单元格中，我有一个嵌套的行/集，其颜色为蓝色。

我的问题是，如何让粉红色的行/集显示在第一行以下的新行上！绿色细胞。目前粉红色的那些堆积在最后一个绿色单元下面。

我相信这是我需要使用clearfix解决方案的地方，并将每组单元格包装在另一个div中并称之为“排”。例如。有没有办法在没有＆＃39;行的情况下做到这一点。包装，我觉得应该有，只要细胞加起来宽度为100％。

期望的结果：http://imgur.com/a/8pdry

提前感谢！

Answer 1

在第3个绿色div之后添加：

<div class="clearfix"></div>

然后将此添加到您的css：

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

或者你也可以清除每三个+ 1 .col-1-3孩子（没有额外的div）：

.col-1-3:nth-child(3n+1) {
    clear:left;
}

或者使用一个明确的类添加到行的每个第一个元素：

.col-first {
    clear:left;
}

Answer 2

只需在第一个粉红色元素中添加一个类，即清除浮动元素。在我的codepen中，我在第一个粉色div中添加了类“clearleft”，然后添加了以下CSS规则：

.clearleft {
  clear:left;
}

Codepen：http://codepen.io/anon/pen/GjprVm

如何将div添加到新行

2 个答案: