基於inline-block進行自適應列表佈局

anetin發表於2018-02-27
inlineBloC

需求

無論是電商網站展示商品列表還是個人部落格展示文章列表，或者是社交站點展示好友列表，往往會遇到自適應列表佈局的需求，本文介紹一種使用inline-block佈局的方法。

block,inline和inlinke-block細節對比

● display:block

  a. block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
  b. block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。
  c. block元素可以設定margin和padding屬性。

● display:inline

  a. inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
  b. inline元素設定width,height屬性無效。
  c. inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

● display:inline-block

  a. 簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

IE6/IE7下對display:inline-block的支援性不好

1、inline元素的display屬性設定為inline-block時，所有的瀏覽器都支援；
2、block元素的display屬性設定為inline-block時，IE6/IE7瀏覽器是不支援的；

  物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行，允許空格。（準確地說，應用此特性的元素現為內聯物件，周圍元素保持在同一行，但可以設定寬度和高度等塊元素的屬性）
 IE中對內聯元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表徵。從上面的這個分析，也不難理解為什麼IE下，對塊元素設定display:inline-block屬性無法實現inline-block的效果。這時塊元素僅僅是被display:inline-block觸發了layout，而它本身就是行佈局，所以觸發後，塊元素依然還是行佈局，而不會如Opera中塊元素呈遞為內聯物件。

IE6下塊元素如何實現display:inline-block的效果？

有兩種方法：
1、 先使用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞為內聯物件（兩個display 要先後放在兩個CSS宣告中才有效果，這是IE的一個經典bug，如果先定義了display:inline-block，然後再將display設回 inline或block，layout不會消失）。程式碼如下（…為省略的其他屬性內容）：

div {display:inline-block;…}
div {display:inline;}

2、直接讓塊元素設定為內聯物件呈遞（設定屬性display:inline），然後觸發塊元素的layout（如：zoom:1 或float屬性等）。程式碼如下：

div { display:inline-block; _zoom:1;_display:inline;} /推薦/
div { display:inline-block; _zoom:1;display:inline;} /推薦:IE67*/

text-jusyify下的inline-block自適應列表佈局例項頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="description" content="text-jusyify下的inline-block自適應列表佈局" />
    <title>text-jusyify下的inline-block自適應列表佈局</title>
    <style>
        .box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;padding-bottom: 0;}
        .list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
        i.list{padding-bottom:0;}
        .fix-justify{font-size:0;}
    </style>
</head>

<body>

    <h1>text-jusyify下的inline-block自適應列表佈局例項頁面</h1>

            <div class="demo">
                <div class="box">
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述，另外一些描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />這是一段文字描述</div>
                    <span class="fix-justify">
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i>
                    <i class="list"></i></span>
                </div>
            </div>

</body>
</html>

效果

相關文章