div内の複数のDivの整列

Question

私はこの種の構造を持っています。

<div id = "div"> 
    <div id = "div1"> 
     <div id = "div11"></div> 
     <div id = "div12"></div> 
    </div> 
    <div id = "div2"> 
     <div id = "div21"></div> 
     <div id = "div22"></div> 
     <div id = "div23"></div> 
     <div id = "div24"></div> 
     <div id = "div25"></div> 
    </div> 
</div> 

div2の場合は、すべてのdivが一致する必要があります。

私はこのstruuectue

ようにしたい[div21] [div22] [div23] [div24]

及び第五divがすべての4つのdivに降りてくる必要があります。

私はフロートの左右の姿勢で試しましたが、私はそれを行うことができません。

どうすればいいですか？

Answer 1

は、ブートストラップ、行と列のメソッドを使用してみてください。この

#div21,#div22,#div23,#div24{ 
    display:inline-block; 
} 

Answer 2

を試してみてください。ブートストラップのCSSファイルをthis websiteからダウンロードしてください。あなたのコードでCSSファイルをリンクして、あなたはこれを試すことができます。

<div id = "div"> <div id = "div1"> <div id = "div11"></div> <div id = "div12"></div> </div> <div id = "div2"> <div class="row"> <div id = "div21" class="col-md-3"></div> <div id = "div22" class="col-md-3"></div> <div id = "div23" class="col-md-3"></div> <div id = "div24" class="col-md-3"></div> </div> <div class="row"> <div id = "div25" class="col-md-12"></div> </div> </div> </div>

div要素の幅がCOL-MD-3の値を変更することによって変更することができます。値の範囲は1〜12です。しかし、行divの合計サイズは12でなければなりません。

Answer 3

フレックスボックスでも可能です。

#div2 { 
 
    display: flex; 
 
} 
 
#div2 > div { 
 
    height: 50px; 
 
    padding: 0 25px; 
 
    bordeR: 1px solid grey; 
 
    margin: 0 .25em; 
 
} 
 
#div25 { 
 
    flex: 1; 
 
}

<div id="div2"> 
 
    <div id="div21"></div> 
 
    <div id="div22"></div> 
 
    <div id="div23"></div> 
 
    <div id="div24"></div> 
 
    <div id="div25"></div> 
 
</div>