成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Cheriselalala / 3365人閱讀

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

需求

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

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

● display:block

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

● display:inline

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

● display:inline-block

  a. 簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
IE6/IE7下對(duì)display:inline-block的支持性不好

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

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

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

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

2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞（設(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í)例頁(yè)面 



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




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


            

                

                    

這是一段文字描述

                    

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

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

                    

這是一段文字描述

效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115740.html

相關(guān)文章

  • CSS 常用的定位和布局方法匯總(已添加源碼地址)

    CSS-Layout 旨在打造詳盡的前端布局代碼學(xué)習(xí)庫(kù)（自從用了框架開(kāi)發(fā)，CSS生疏了不少，所以開(kāi)這個(gè)庫(kù)練練手）SF不能正確解析含有中文的網(wǎng)址，所以某些預(yù)覽鏈接無(wú)法跳轉(zhuǎn)，請(qǐng)?jiān)L問(wèn)我的博客閱讀此文 常見(jiàn)定位方法 水平居中 子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。 方案選擇基本思路：子元素為 行內(nèi)元素：對(duì)父元素設(shè)置text-align:center; 定寬塊狀元素: 設(shè)...

    loonggg 評(píng)論0 收藏0

  • div+css圖片列表布局（一）

    摘要：接下來(lái)我會(huì)以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來(lái)講布局的方法布局非常簡(jiǎn)單，一般我會(huì)使用布局然后給每個(gè)元素定一個(gè)寬度并向左浮動(dòng)。是不是很簡(jiǎn)單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧 前端切圖的時(shí)候經(jīng)常會(huì)遇到圖片布局，初學(xué)者可能會(huì)比較生疏。接下來(lái)我會(huì)以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

    Travis 評(píng)論0 收藏0

  • div+css圖片列表布局（一）

    摘要：接下來(lái)我會(huì)以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來(lái)講布局的方法布局非常簡(jiǎn)單，一般我會(huì)使用布局然后給每個(gè)元素定一個(gè)寬度并向左浮動(dòng)。是不是很簡(jiǎn)單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧 前端切圖的時(shí)候經(jīng)常會(huì)遇到圖片布局，初學(xué)者可能會(huì)比較生疏。接下來(lái)我會(huì)以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

    ThreeWords 評(píng)論0 收藏0

  • PC端CSS布局匯總

    摘要：因?yàn)槎撕鸵苿?dòng)端布局差異較大，所以我將兩端布局分開(kāi)講，本文章將針對(duì)端的布局進(jìn)行講解，以下代碼只寫(xiě)關(guān)鍵代碼。為了提高網(wǎng)頁(yè)性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。 前言 此文章是 解剖CSS布局原理 的續(xù)集，之前那篇文章講的都是理論，本文章講具體的實(shí)例，根據(jù)自己對(duì)布局的理解與開(kāi)發(fā)經(jīng)驗(yàn)分為以下幾類。 因?yàn)镻C端和移動(dòng)端布局差異較大，所以我將兩端布局分開(kāi)講，本文章將針對(duì)P...

    zhangxiangliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<