CSS floatを使ってこのパターンを作成するには？

Question

純粋なCSSでこのレイアウトを作成しようとしています。私はクリアな左右に問題があります。サブグループ化せずにこれが可能かどうか疑問に思いますか？ お返事ありがとうございました。あなたは親要素の上に固定された高さを設定したい場合は、フレキシボックスでこれを行うことができ

<div> 
    -------------------------------------------------------- 
    |   | [item 1] |   | [item 4] |   | 
    | [item 0] |----------| [item 3] |----------| [item 6] | 
    |   | [item 2] |   | [item 5] |   | 
    -------------------------------------------------------- 
</div> 

私のコード

<div> 
    <a href="#item-0" class="biggie">[item 0]</a> 
    <a href="#item-1" class="small">[item 1]</a> 
    <a href="#item-2" class="small">[item 2]</a> 
    <a href="#item-3" class="biggie">[item 3]</a> 
    <a href="#item-4" class="small">[item 4]</a> 
    <a href="#item-5" class="small">[item 5]</a> 
    <a href="#item-6" class="biggie">[item 6]</a> 
</div> 

Answer 1

、またクラスの使用を避けるためにnth-child(xn)を使用することができます。

margin:autoは、行に均等に整列してスプレーするのに役立ちます。

div { 
 
    display:flex; 
 
    flex-flow:column wrap; 
 
    height:3em; 
 
} 
 
a { 
 
    margin:auto; 
 
    background:gray/*see me */ 
 
} 
 
a:nth-child(3n - 2) { 
 
    margin:1em auto; 
 
    background:yellow/*see me */ 
 
}

<div> 
 
    <a href="#item-0" >[item 0]</a> 
 
    <a href="#item-1" >[item 1]</a> 
 
    <a href="#item-2" >[item 2]</a> 
 
    <a href="#item-3" >[item 3]</a> 
 
    <a href="#item-4" >[item 4]</a> 
 
    <a href="#item-5" >[item 5]</a> 
 
    <a href="#item-6" >[item 6]</a> 
 
</div> 
 
<hr/> 
 
<div> 
 
    <a href="#item-0" >[item 0]</a> 
 
    <a href="#item-1" >[item 1]</a> 
 
    <a href="#item-2" >[item 2]</a> 
 
    <a href="#item-3" >[item 3]</a> 
 
    <a href="#item-4" >[item 4]</a> 
 
    <a href="#item-5" >[item 5]</a> 
 
    <a href="#item-6" >[item 6]</a> 
 
    <a href="#item-7" >[item 7]</a> 
 
    <a href="#item-8" >[item 8]</a> 
 
    <a href="#item-9" >[item 9]</a> 
 
</div>

Answer 2

。代わりにflexfloat沿い

div { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 60px; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
div > a { 
 
    flex: 1; 
 
} 
 
div > a.biggie { 
 
    flex: 0 0 100%; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div> 
 
    <a href="#item-0" class="biggie">[item 0]</a> 
 
    <a href="#item-1" class="small">[item 1]</a> 
 
    <a href="#item-2" class="small">[item 2]</a> 
 
    <a href="#item-3" class="biggie">[item 3]</a> 
 
    <a href="#item-4" class="small">[item 4]</a> 
 
    <a href="#item-5" class="small">[item 5]</a> 
 
    <a href="#item-6" class="biggie">[item 6]</a> 
 
</div>

Answer 3

CSSグリッドレイアウトのための完璧なユースケースのようです：あなたは非のためのフォールバックとしてフレキシボックスソリューションを使用することができます

div { 
 
    display: grid; 
 
    grid-template: repeat(2, auto)/repeat(5, auto); 
 
    grid-gap: 1px; 
 
    grid-auto-flow: column dense; 
 
} 
 
div > a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px dashed #ccc; 
 
} 
 
div > a.biggie { 
 
    grid-row: span 2; 
 
}

<div> 
 
    <a href="#item-0" class="biggie">[item 0]</a> 
 
    <a href="#item-1" class="small">[item 1]</a> 
 
    <a href="#item-2" class="small">[item 2]</a> 
 
    <a href="#item-3" class="biggie">[item 3]</a> 
 
    <a href="#item-4" class="small">[item 4]</a> 
 
    <a href="#item-5" class="small">[item 5]</a> 
 
    <a href="#item-6" class="biggie">[item 6]</a> 
 
</div>

- グリッド対応ブラウザー。