異なるサイズのタイルによる反応的なレイアウト。適切な改行を設定する

私はw3.cssを使ってレスポンシブなレイアウトを構築しようとしています。これは、異なる高さと幅の3種類のタイルで構成されています。レイアウトは、小さな画面では1列、大きい画面では2列、中画面では3列（w3.cssで決定）です。ストレートフォワードコード（https://jsfiddle.net/pwunsch/p2nL28f3/2/）で異なるサイズのタイルによる反応的なレイアウト。適切な改行を設定する

...

<body class="w3-gray" id="home"> 
    <div class="w3-content w3-white" style="max-width:400px"> 
    <div class="w3-row-padding"> 
     <div class="w3-col l4 m6 s12"><div class="normal">1 - normal article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="short">2 - short article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="normal">3 - normal article</div></div> 
     <div class="w3-col l8 m12 s12"><div class="special">4 - special article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="normal">5 - normal article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="short">6 - short article</div></div>  
     <div class="w3-col l8 m12 s12"><div class="special">7 - special article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="short">8 - short article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="short">9 - short article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="short">10 - short article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="normal">11 - normal article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="normal">12 - normal article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="short">13 - short article</div></div> 
     <div class="w3-col l4 m6 s12"><div class="normal">14 - normal article</div></div>       
    </div> 
    </div> 
</body>

...私は、いつでも行が行の最後の1よりも大きいタイルが含まれていることを問題に遭遇後続のタイルは新しいタイルではなく、同じ行に配置されます（次の例のタイル13/14を参照）。これは実際にはfloat: leftが動作するはずであると私が理解していることです。

example of unwanted layout

限り、全てのタイルが、この問題は簡単にすべての第3又は（画面サイズに応じて）すべての第2のタイルに:nth-child()セレクタとclear: left;プロパティを設定することによって解決することができる等しい幅のものです。

しかし、この場合、2列幅のタイルでは、このような単純なカウントルールはありません。ただし、フォーマットルールは単純です。タイルが最後の列を塗りつぶすたびに、次のタイルはclear:leftプロパティを受け取る必要があります。しかし、私はどのようにこれをCSSに含めるのか分かりません。 JavaScriptもうまくいくはずです。

何か助けていただければ幸いです。

出典

2017-12-24 Patrick Wunsch

CSSは単独ではありません。すべてのタイルの幅が同じであれば、CSSカラムを使用できます。しかし、この場合、フィドルを小さくすると、問題は別の場所で現れます。つまり、あなたは別のレイアウトエンジンを探しています。 Googleで「石積みレイアウト」を探します。 –

ヒントありがとう、私は試してみます –

石積みのように見えるのは、私が探しているものではありません。石積みはコンパクトに列をあきらめるタイルをパックします。私が探しているレイアウトは、行ベースで、タイルを順番に並べ替えています。実際には石工よりもはるかに簡単です。何か案は？ –

w3.cssからブートストラップ4に切り替えることが考えられます。ブートストラップ4は、フロートの代わりにフレックスボックスを使用します。フレックスボックスは、上記のレイアウトで期待どおりに動作します。コードは簡単です（https://jsfiddle.net/pwunsch/u35sd03u/）。上記シナリオの細かい動作

<body> 
    <div class="container" id="content"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">1 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">2 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">3 - normal article</div></div> 
     <div class="col-sm-12 col-md-12 col-lg-8"><div class="special">4 - special article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">5 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">6 - short article</div></div>  
     <div class="col-sm-6 col-md-12 col-lg-8"><div class="special">7 - special article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">8 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">9 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">10 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">11 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">12 - normal article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="short">13 - short article</div></div> 
     <div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">14 - normal article</div></div> 
    </div> 
</div>

。私は同じようにw3.cssを修正/修正する明白な方法を見つけられませんでした。

出典

2018-01-01 17:01:24

異なるサイズのタイルによる反応的なレイアウト。適切な改行を設定する

答えて

関連する問題