float：「left」vs display：「inline-block」

我有一個要求，我需要並排顯示兩個div。這是基本要求，我需要基於構建更多功能。float：「left」vs display：「inline-block」

我能夠以兩種方法來實現這一目標：

方法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？ display：inline-block？ 我的最終目標是讓div在未來有所反應。這就是爲什麼想知道哪一個更好 另外，爲什麼當使用display:inline-block時，div之間會產生空間？

來源

2016-09-07 user2630764

這個問題要麼是基於**的觀點，要麼是堆棧溢出的話題。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?rq=1 –

非常基於觀點，除了['display：flex' *顯然*最好的選擇]（http://jsbin.com/guzevehoya/edit?html,css,output）：p – misterManSam

使用內嵌塊的一個好處是你可以使用'text-align：center'來橫向居中它們。在容器元素上。

你寫的空間是由於在代碼中使用換行符而產生的空白造成的。

來源

2016-09-07 11:58:50 Johannes

float：「left」vs display：「inline-block」

回答

相關問題