css如何利用負(fù)margin技術(shù)實現(xiàn)平均布局
我要評論我們平常會利用float布局來解決IE瀏覽器CSS的兼容性問題，比如淘寶，就是用float布局來實現(xiàn)的。 我們會在淘寶頁面會看到下圖這樣一種布局。
這種圖片均勻分布的布局我們叫平均布局，那這種布局又是怎么實現(xiàn)的呢？ 有的同學(xué)可能覺得，這還不簡單，可以直接設(shè)置父元素div寬度和子元素寬度總和相等就可以了。 真的有這么容易嗎，我們來試一下。
測試
假如我們令每個子元素寬度為100px，一共3個子元素，給每個子元素一個margin-right，設(shè)為50px，那父元素寬度應(yīng)為100x3+50x2=400px。我們設(shè)置一些樣式。html和css代碼如下。
//HTML <div class="father clearfix"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div>
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.father {
width: 400px;
height: 100px;
margin: 10px;
background-color: #d5a4cf;
border: 1px solid black;
}
.son {
border: 1px solid black;
background-color: #fff1ac;
float: left;
margin-right: 50px;
width: 100px;
height: 100px;
}
此時效果如下
我們發(fā)現(xiàn)最后一個子元素被擠下來了，這是為什么呢。不要問為什么，因為這就是CSS。 那我們該怎么解決呢，有的同學(xué)說，是受父元素的1px的border影響，我們把換成outline試一下。
我們發(fā)現(xiàn)還是沒有起作用，這個時候怎么辦呢。接下來給大家介紹一種“負(fù)margin”的方法。 我們給父元素和子元素間加一個中間層，令這個div的margin-right為-50px，我們再來試一下。
//HTML
<div class="father clearfix">
<div class="middle clearfix">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</div>
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.father {
width: 400px;
height: 100px;
margin: 10px;
background-color: #d5a4cf;
outline: 1px solid black;
}
.son {
border: 1px solid black;
background-color: #fff1ac;
float: left;
margin-right: 50px;
width: 100px;
height: 100px;
}
.middle {
margin-right: -50px;
}
這個時候我們發(fā)現(xiàn)，中間的div通過“延伸”右外邊距把帶三個子元素“包進去”了，從而實現(xiàn)了 平均布局 。
結(jié)論
通過我們的測試，我們找到了解決平均布局的方案，希望能對大家有幫助。更多關(guān)于css平均布局的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
css 布局 之 兩端布局的實例代碼 （利用父級負(fù)的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負(fù)的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋2020-06-08css布局之負(fù)margin妙用及其他實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了css布局之負(fù)margin妙用及其他實現(xiàn)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07CSS中使用負(fù)margin值來調(diào)整居中位置
這篇文章主要介紹了CSS中使用負(fù)margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下2015-07-15
css利用負(fù)margin實現(xiàn)平均布局的示例
這篇文章主要介紹了css利用負(fù)margin實現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-11-03
