浮動子女中心父母div

我想創建一個響應式網格。我有一個包含漂浮兒童的「父母」div。根據頁面寬度，每個'行'顯示可變數量的子項。孩子應該集中。浮動子女中心父母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。父分區變得太寬，孩子不再居中。

有沒有辦法在保留響應行爲的同時獲得示例O2行爲？

來源

2013-04-21 user2304931

我找到了解決方案 http://stackoverflow.com/questions/15950007/centering-floated-images-in-div 父母得到一個'text-align：cent呃;'。孩子們得到了「display：inline-block」而不是「float：left」。 – user2304931 2013-04-21 20:09:20

使用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-21 18:38:55

在您的解決方案中，我仍然需要指定每行的子級數。我正在尋找一種解決方案，每行的子女人數由瀏覽器決定。 – user2304931 2013-04-21 19:42:24

浮動子女中心父母div

回答

相關問題