display:inline-block帶來的問題及解決辦法

在平常工做中，會常常遇到兩個或多個元素並排排列的效果，之前會使用float等實現，float雖然方便好用，可是須要清除浮動，有時會帶來意想不到的bug

並且在移動端是不推薦使用float的，因此使用display:inline-block是一個不錯的選擇。

可是display:inline-block有時也會帶來各類問題，下面是我遇到的一些問題並附帶解決辦法（有的問題目前我尚未找到解決辦法）

1.  如圖所示是兩個並排的div，均設置爲display：inline-block

 

HTML代碼：

<div class="demo">
   <div class="first"></div>
   <div class="second"></div>
</div>

CSS代碼：

.demo > div{ display: inline-block; border: 1px solid red; font-size: 30px;
} .first{ width: 100px; height: 100px;
} .second{ width: 120px; height: 120px;
}

能夠看出，兩個div中間有空白間隔，可是代碼中沒有任何margin，查閱資料發現，這種空白間隔是正常現象

咱們的代碼中的換行和空格等都會產生這樣的間隔，除非咱們把代碼首尾相連寫在一塊兒，可是這樣的代碼並不容易閱讀

還有一個解決辦法是設置父元素font-size：0；由於空白字符也是一個字符，只要設置爲0，則間隔就消失了，如圖所示：

2.  上圖是兩個空白div，其中並無任何內容，若是在其中一個div中加入內容，以下：

HTML代碼：

<div class="demo">
   <div class="first"><span>left</span></div>
   <div class="second"></div>
</div>

CSS代碼不變

效果以下：

加入內容的div相對之前的位置會偏移不少

或者咱們兩個div中都加入內容：

HTML代碼：

<div class="demo">
   <div class="first">
      <span>left</span>
   </div>
   <div class="second">
      <span>right</span>
   </div>
</div>

效果以下：

兩個div變成了頂部對齊，而沒有內容時是底部對齊，下面咱們在右邊div再多加一些內容，效果以下：

而後咱們給右邊div設置字體font-size:50px，左邊不變，效果以下：

若是給右邊div加上margin-top：40；左邊不變，效果以下：

那加上padding呢，效果以下：

而後咱們發現，不管是設置字體大小，仍是設置padding，margin等，兩個div一直處在錯亂的狀態，並無整齊排列

可是錯亂的狀態下也是有錯亂的規律的，即左邊div和右邊div中的文字始終處於底端對齊的狀態！！

發現了規律，那解決辦法就出來了，

（1）給左右兩邊div都加上一句vertical-align：middle；效果以下：

此時，兩個div總體以中間對齊，若是兩個div高度一致，那天然就底部對齊啦

（2）給兩個div都加上一句overflow：hidden，效果以下：

此時兩個div是底部對齊。