コンテナのサイドバイサイドブロックを正しく整列する方法

Question

私は表示ブロック付きのdivを持っており、その中にはインラインブロック内の他のものがあります。これは私が持っているものです。

display:inline-block case

私は、ディスプレイに最初の内側のdivを置くとき：ブロックを、左フロートと、私はこれがあります、

display:block with floating case

#container { 
    display: block; 
    width: 50%; /*Of its parent*/ 
} 

#container > div { 
    display: block; 
    width: 22%; 
    padding: 5px 1.2%; 
    float: left; 
} 

/* or 

#container > div { 
    display: inline-block; 
    width: 22%; 
    padding: 5px 1.2%; 
} 

or 

#container > div { 
    display: inline-block; 
    width: 22%; 
    padding: 5px 1.2%; 
    float: left; 
} 

*/ 

をしてください誰かがそれが何であるかを私に語ったことができます間違って、それを修正するのに役立ちますか？ ありがとう

Answer 1

5px 1.2%と22%は本当によく動作しません、

#container > div { 
    display: block; 
    width: 25%; 
    padding: 5px 1%; 
    margin: 0; 
    float: left; 
} 

#container>div { 
 
    display: block; 
 
    width: 23%; 
 
    padding: 5px 1%; 
 
    margin: 0; 
 
    float: left; 
 
    height: 100px; 
 
} 
 

 
.red{ 
 
    background: red; 
 
} 
 
.green{ 
 
    background: green; 
 
}

<div id="container"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
</div>

Answer 2

display: flexを試してみてください。フロートは問題を引き起こす傾向があります。 Flexはこれらの問題のいくつかを修正する予定です。偉大なガイドでは、ここで見つけることができます：https://css-tricks.com/snippets/css/a-guide-to-flexbox/