float： "left" vs display： "inline-block"

Question

2つのdivを並べて表示する必要があるという要件があります。これは多くの機能がさらに進化する基本的な要件です。

私は2つのアプローチでこれを達成することができる午前：

アプローチ1：

<div id="id1" style="width:100%"> 
    <div id="id2" style="width:100px;color:#0000FF;display:inline-block;border-color: red;border-style: solid;"> 
    <p>This is some text in a div1 element.</p> 
    </div> 
    <div id="id3" style="width:100px;display:block;display:inline-block;border-color:blue;border-color: blue;border-style: solid;"> 
    <p>This is some text in a div2 element.</p> 
    </div> 
</div> 

アプローチ2：より良いものですアプローチ

<div id="id1" style="width:100%"> 
    <div id="id2" style="width:100px;color:#0000FF;float:left;border-color: red;border-style: solid;"> 
    <p>This is some text in a div1 element.</p> 
    </div> 
    <div id="id3" style="width:100px;display:block;float:left;border-color:blue;border-color: blue;border-style: solid;"> 
    <p>This is some text in a div2 element.</p> 
    </div> 
</div> 

？

float：left？ ディスプレイ：インラインブロック？ 私の究極の目的は将来的にdivsを反応的にすることです。理由はどちらが良いかを知りたかった理由 また、display:inline-blockを使用するとdiv間にスペースが作成されるのはなぜですか？

Answer 1

インラインブロックを使用するメリットの1つは、 `text-align：center;を使用して、それらをhorzontallyに配置できることです。容器要素上に置く。

あなたが書いたスペースは、コード内に改行を使用した結果の空白が原因です。