inline-block並列排序時候的影響

當兩個設置了inline-block屬性的元素並列排放時，它們的位置可以互相影響。

元素結構：

  <div class="container">

    <div class="container-demo1">

        <span>1</span>

    </div>

    <div class="container-demo2">

        <!-- <span>2</span> -->

    </div>

    <div class="container-demo3">

        <span>3</span>

    </div>

  </div>

咱們使三個div都設置爲 inline-block，設置寬度使其居於一行內。若是再把 container-demo2 中的內容註釋掉，咱們能夠看到一種十分詭異的狀況，如圖。

 

能夠發現本該位於父容器頂端的demo1和demo3竟然沉了下去，而沒有內容的demo2還在正常位置上。這時候就會想：確定是元素的內容形成了這種結果。那麼咱們如今給demo2加上內容看看效果：

 

能夠看到三個元素都回到了咱們想讓它呈現的位置。那爲何inline-block元素的位置會受到其內容的影響呢？咱們能夠查到這樣一句話：inline-block元素能夠將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。有了這樣的屬性，咱們就能夠在表現上將對象用做內斂元素但又能夠對它進行寬高設置。但有一點須要注意的是對象仍然呈遞爲內聯元素，而同一行內的內聯元素默認是基於 baseline 對齊的，咱們能夠在1圖中標記出來：

 

即圖中的藍色線條，具體的咱們能夠去查看W3C的 vertical-align 屬性。好的，基於基線對齊的模式咱們有了理解，但還有一個問題：爲何3個元素的方向不是相同的呢？爲何有內容的元素向下，而無內容的元素會向上呢？就此咱們須要瞭解CSS渲染機制：對於一個inline-block元素，若是內部沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是它margin的底邊緣，不然就是元素內部最後一行內聯元素的基線。

簡單地就以上這種狀況來講，沒有內容的demo2會基於它的margin底邊緣也就是它的下邊緣對齊，而包含內容的demo1和demo3會基於其內部內聯元素的基線對齊，因此會形成這種一上一下的狀況。

解決辦法：

一、暴力float，固然這是備選方案，畢竟脫離文檔流後頁面元素會很差控制

二、簡單粗暴地給全部元素都加上內容，例如空格符

三、設置全部內聯元素 vertical-align: top/middle/bottom; 屬性，改變默認設置