1

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

为了让“父” div 适合我display:table在父 div 上设置的孩子。

请看下面的小提琴：

http://jsfiddle.net/dwjbosman/cXuQ6/5/

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 按预期工作。但是我希望它可以与更多漂浮的孩子一起使用。

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

如果我省略了“清除”，它将不再起作用，结果是示例 O3。父 div 变得太宽，孩子不再居中。

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

4

1 回答 1

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/

于 2013-04-21T18:38:55.493 回答