資訊專欄INFORMATION COLUMN
摘要：今天在工作中遇到了一個問題有三個塊，里面放置展示內容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應寬度。首先就是可能會打亂的加載順序，還有就是間距是不固定的，并且加了，可能會有副作用。
今天在工作中遇到了一個問題：有三個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，也算是有些副作用了。到工作時再根據需要進行取舍吧。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49661.html
摘要：今天在工作中遇到了一個問題有三個塊，里面放置展示內容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應寬度。首先就是可能會打亂的加載順序，還有就是間距是不固定的，并且加了，可能會有副作用。 今天在工作中遇到了一個問題：有三個div塊，里面放置展示內容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應寬度。 我第一時間想到的是傳統的三列布局，但傳統的三列布局都是固定寬度加自適應寬度，從網...
CSS-Layout 旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網址，所以某些預覽鏈接無法跳轉，請訪問我的博客閱讀此文 常見定位方法 水平居中 子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。 方案選擇基本思路：子元素為 行內元素：對父元素設置text-align:center; 定寬塊狀元素: 設...
摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
閱讀 3724·2021-11-24 10:23
閱讀 2771·2021-09-06 15:02
閱讀 1274·2021-08-23 09:43
閱讀 2351·2019-08-30 15:44
閱讀 3045·2019-08-30 13:18
閱讀 779·2019-08-23 16:56
閱讀 1743·2019-08-23 16:10
閱讀 536·2019-08-23 15:08
