css利用負(fù)margin實現(xiàn)平均布局的示例
發(fā)布時間：2020-11-03 17:27:13 作者：Xie666-byte 
我要評論
我要評論這篇文章主要介紹了css利用負(fù)margin實現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
對于平均分布的布局，我們一般使用負(fù)margin的方法。如下圖，就是平均布局。
一般這種情況，我們都是在父元素和子元素之間加上一層div，然后，給這個div設(shè)置負(fù)margin-right，值為兩個子元素之間的距離。
例如，我們令每個子元素寬度為100px，一共3個子元素，給每個子元素一個margin-right，設(shè)為50px，那父元素寬度應(yīng)為100x3+50x2=400px。上代碼：
//HTML
<div class="father">
<div class="middle">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</div>
//CSS
.son1,.son2,son3{
margin-right:50px;
width:100px;
}
.father{
width:400px;
}
.middle{
margin-right:-50px;
}
中間層margin-right:-50px相當(dāng)于向右“延伸”了50px，使得son3元素有空間和其他元素在一行。
到此這篇關(guān)于css利用負(fù)margin實現(xiàn)平均布局的示例的文章就介紹到這了,更多相關(guān)css 負(fù)margin平均布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css 布局 之 兩端布局的實例代碼 （利用父級負(fù)的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負(fù)的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋2020-06-08
css如何利用負(fù)margin技術(shù)實現(xiàn)平均布局
這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實現(xiàn)平均布局，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2020-03-09css布局之負(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
