1

レスポンシブ グリッドを作成しようとしています。フローティングの子を含む「親」div があります。ページ幅に応じて、可変数の子が「行」ごとに表示されます。子供たちは中心にいるべきです。

親divに設定した子に合わせて「親」divを取得するにはdisplay:table。

次のフィドルを参照してください。

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 は期待どおりに動作します。しかし、私はそれがより多くの浮遊する子供たちと一緒に働きたいと思っています。

例 O2: clear: both1 行の子の後に手動で挿入すると機能します。もちろん、これはレイアウトの応答性を損ないます。

「クリア」を省略すると、機能しなくなり、結果は例 O3 になります。親の div が広すぎて、子が中央に配置されなくなります。

応答性の高い動作を維持しながら、O2 の動作例を取得する方法はありますか?

4

1 に答える 1

1

.ChildCSS3 を使用すると、#5 から4 番目ごとにクリアできます。

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 に答える