基于inline-block進(jìn)行自適應(yīng)列表布局

Cheriselalala 發(fā)布于2019-08-30 14:03 / 3351人閱讀

摘要：代碼如下為省略的其他屬性內(nèi)容直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞設(shè)置屬性，然后觸發(fā)塊元素的如或?qū)傩缘取?/p>

需求

無論是電商網(wǎng)站展示商品列表還是個人博客展示文章列表，或者是社交站點(diǎn)展示好友列表，往往會遇到自適應(yīng)列表布局的需求，本文介紹一種使用inline-block布局的方法。

block,inline和inlinke-block細(xì)節(jié)對比

● display:block

  a. block元素會獨(dú)占一行，多個block元素會各自新起一行。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度。
  b. block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
  c. block元素可以設(shè)置margin和padding屬性。

● display:inline

  a. inline元素不會獨(dú)占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
  b. inline元素設(shè)置width,height屬性無效。
  c. inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。

● display:inline-block

  a. 簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

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

1、inline元素的display屬性設(shè)置為inline-block時，所有的瀏覽器都支持；
2、block元素的display屬性設(shè)置為inline-block時，IE6/IE7瀏覽器是不支持的；

  對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行，允許空格。（準(zhǔn)確地說，應(yīng)用此特性的元素現(xiàn)為內(nèi)聯(lián)對象，周圍元素保持在同一行，但可以設(shè)置寬度和高度等塊元素的屬性）
 IE中對內(nèi)聯(lián)元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表征。從上面的這個分析，也不難理解為什么IE下，對塊元素設(shè)置display:inline-block屬性無法實(shí)現(xiàn)inline-block的效果。這時塊元素僅僅是被display:inline-block觸發(fā)了layout，而它本身就是行布局，所以觸發(fā)后，塊元素依然還是行布局，而不會如Opera中塊元素呈遞為內(nèi)聯(lián)對象。

IE6下塊元素如何實(shí)現(xiàn)display:inline-block的效果？

有兩種方法：
1、先使用display:inline-block屬性觸發(fā)塊元素，然后再定義display:inline，讓塊元素呈遞為內(nèi)聯(lián)對象（兩個display 要先后放在兩個CSS聲明中才有效果，這是IE的一個經(jīng)典bug，如果先定義了display:inline-block，然后再將display設(shè)回 inline或block，layout不會消失）。代碼如下（...為省略的其他屬性內(nèi)容）：

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

2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞（設(shè)置屬性display:inline），然后觸發(fā)塊元素的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自適應(yīng)列表布局實(shí)例頁面




    
    
    text-jusyify下的inline-block自適應(yīng)列表布局
    




    text-jusyify下的inline-block自適應(yīng)列表布局實(shí)例頁面

            
                
                    
這是一段文字描述
                    
這是一段文字描述，另外一些描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述
                    
這是一段文字描述