国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

xuhong / 2405人閱讀

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

今天在工作中遇到了一個(gè)問題：有三個(gè)div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。
我第一時(shí)間想到的是傳統(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:

不過思考一下，這個(gè)問題有很多的不方便。首先就是可能會(huì)打亂html的加載順序，還有就是間距是不固定的，并且加了float，可能會(huì)有副作用。
之后我就考慮第二種方案。問了下同事，提到了可以用inline-block代替float的方法。這給了我很大的啟發(fā)。回來我就試了一下。

第二種想到的辦法

這種方法將這三個(gè)塊都設(shè)置成display:inline-block，利用inline元素的特性將其居于一行，再將其box-sizing屬性設(shè)置成border-box。
這種方法，好處有幾點(diǎn)：
1.不會(huì)有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ù)想中他們之間沒有空隙，充滿容器，不會(huì)換行。結(jié)果他們義無反顧地?fù)Q行了，之間有了一個(gè)本不該存在的空隙。
原因也很簡(jiǎn)單，作為一個(gè)帶有inline的元素之間換行是會(huì)被識(shí)別為空格的（哭）。
原理找到了，這里有詳細(xì)的解釋，鑫旭大神就是厲害：張?chǎng)涡駥?duì)于inline-block的理解。這里是個(gè)demo，就用最簡(jiǎn)單的方法去除空格就好了。
接下來還有個(gè)問題：無法通過margin/padding來給他們之間設(shè)置間隔。這里想了一個(gè)辦法：在每個(gè)盒子里面嵌套一個(gè)盒子，背景設(shè)置給里面的，寬度設(shè)置比100%小一點(diǎn)，通過margin：auto進(jìn)行調(diào)整位置，這樣就有一個(gè)可以調(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：

效果：

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111196.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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