css實現左右頂頭、寬度自適應的多列、多塊并排，多列布局

xuhong 發布于2019-08-28 18:21 / 2393人閱讀

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

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

第一種想到的辦法：

第一種我準備用兩邊float，中間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:

結果變成了這樣：

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

 html:

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

第二種想到的辦法

這種方法將這三個塊都設置成display:inline-block，利用inline元素的特性將其居于一行，再將其box-sizing屬性設置成border-box。
這種方法，好處有幾點：
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:

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

效果：

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

GPU云服務器云服務器 html的寬度自適應自適應寬度寬度自適應自適應寬度按鈕

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111196.html

css實現左右頂頭、寬度自適應的多列、多塊并排，多列布局

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

anyway 2019-08-01 14:56 評論0 收藏0
CSS 常用的定位和布局方法匯總(已添加源碼地址)

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

loonggg 2019-08-29 12:15 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

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

lijinke666 2019-08-29 11:22 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

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

hedge_hog 2019-08-20 11:16 評論0 收藏0