Question

我正在尝试创建响应式网格。我有一个'父'div包含漂浮的孩子。根据页面宽度，每个“行”显示可变数量的子项。孩子们应该居中。

为了让'父'div适合孩子，我在父div上设置了display:table。

请参阅以下小提琴：

的CSS：

.page {
    background: #a00;
    width:700px;
    margin: 20px;
}
.Parent {
    background: #ccc;
    border: 1px solid black;
    display: table;
    margin-left: auto;
    margin-right:auto;
}
.Child {
    float: left;
    width: 150px;
    height: 50px;
    background:red;
    margin: 5px;
}
.br {
    clear: both;
}

HTML：

<div class='page'>O1
<div class="Parent">
    <div class="Child">a</div>
    <div class="Child">b</div>
    <div class="Child">c</div>
    <div class="Child">d</div>
</div>

示例O1按预期工作。但是我想让它与更多漂浮的孩子一起工作。

示例O2：如果我在一行子项后手动插入clear: both，则有效。这当然会破坏布局的响应性。

如果我忽略'清除'它不再有效，结果就是示例O3。父div变得太宽，孩子们不再居中。

有没有办法在保留响应行为的同时获得示例O2行为？

Answer 1

使用CSS3，您可以清除每隔4 .Child，从＃5开始：

div.Child:nth-child(4n+5){
    clear: both;
    background-color: #ddf;
}

浏览器支持并不可怕：https://developer.mozilla.org/en-US/docs/CSS/:nth-child#Browser_compatibility

我分道扬琴：http://jsfiddle.net/ghodmode/y8g2V/

中心父母div与浮动孩子

1 个答案: