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

資訊專欄INFORMATION COLUMN

css實(shí)現(xiàn)左右頂頭、寬度自適應(yīng)的多列、多塊并排，多列布局

anyway / 1183人閱讀

摘要：今天在工作中遇到了一個問題有三個塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。首先就是可能會打亂的加載順序，還有就是間距是不固定的，并且加了，可能會有副作用。

今天在工作中遇到了一個問題：有三個div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。
我第一時間想到的是傳統(tǒng)的三列布局，但傳統(tǒng)的三列布局都是固定寬度加自適應(yīng)寬度，從網(wǎng)上搜了好久都沒有搜到結(jié)果。所以自己想辦法。

第一種想到的辦法：

第一種我準(zhǔn)備用兩邊f(xié)loat，中間margin居中的方法。代碼如下：
css:

    .wrap{height:300px;width:95%;margin: 100px auto;}
    .left{float:left;width:32%;height:100px;background-color: #235255}
    .right{float:right;width:32%;height:100px;background-color: #374737}
    .middle{width:32%;margin:0 auto;height:100px;background-color: #563958}

html:

結(jié)果變成了這樣：

查了一下，解決辦法是把right提到最前面。試了一下，成功了。

 html:

不過思考一下，這個問題有很多的不方便。首先就是可能會打亂html的加載順序，還有就是間距是不固定的，并且加了float，可能會有副作用。
之后我就考慮第二種方案。問了下同事，提到了可以用inline-block代替float的方法。這給了我很大的啟發(fā)?；貋砦揖驮嚵艘幌隆?/p> 第二種想到的辦法

這種方法將這三個塊都設(shè)置成display:inline-block，利用inline元素的特性將其居于一行，再將其box-sizing屬性設(shè)置成border-box。
這種方法，好處有幾點(diǎn)：
1.不會有float的副作用存在
2.不管是三列還是三十列，來就行
代碼如下：
css：

    .g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
    .in-bl{display: inline-block;}
    .f{width: 33.333%;height: 100px;background-color: #ab1256;}
    .s{width: 33.333%;height: 100px;}
    .t{width: 33.333%;height: 100px;background-color:#192873;}

html:

結(jié)果與預(yù)想的不太相同。預(yù)想中他們之間沒有空隙，充滿容器，不會換行。結(jié)果他們義無反顧地?fù)Q行了，之間有了一個本不該存在的空隙。
原因也很簡單，作為一個帶有inline的元素之間換行是會被識別為空格的（哭）。
原理找到了，這里有詳細(xì)的解釋，鑫旭大神就是厲害：張鑫旭對于inline-block的理解。這里是個demo，就用最簡單的方法去除空格就好了。
接下來還有個問題：無法通過margin/padding來給他們之間設(shè)置間隔。這里想了一個辦法：在每個盒子里面嵌套一個盒子，背景設(shè)置給里面的，寬度設(shè)置比100%小一點(diǎn)，通過margin：auto進(jìn)行調(diào)整位置，這樣就有一個可以調(diào)整的間隙了~
代碼如下：
css：

.g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}
.in-bl{display: inline-block;}
.f{width: 33.333%;height: 100px;background-color: #ab1256;}
.s{width: 33.333%;height: 100px;}
.t{width: 33.333%;height: 100px;background-color:#192873;}
.in{margin:0 auto;px;width: 95%;background-color:#958727;height: 100%}

html：

效果：

大功告成。這樣的方法會增加一個嵌套，要設(shè)置border-box，也算是有些副作用了。到工作時再根據(jù)需要進(jìn)行取舍吧。

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

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

相關(guān)文章

  • css實(shí)現(xiàn)左右頂頭、寬度自適應(yīng)的多列、多塊并排，多列布局

    摘要：今天在工作中遇到了一個問題有三個塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。首先就是可能會打亂的加載順序，還有就是間距是不固定的，并且加了，可能會有副作用。 今天在工作中遇到了一個問題：有三個div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。 我第一時間想到的是傳統(tǒng)的三列布局，但傳統(tǒng)的三列布局都是固定寬度加自適應(yīng)寬度，從網(wǎng)...

    xuhong 評論0 收藏0

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

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

    loonggg 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    lijinke666 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    hedge_hog 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<