css利用負margin實現(xiàn)平均布局的示例
發(fā)布時間：2020-11-03 17:27:13 作者：Xie666-byte 
我要評論
我要評論這篇文章主要介紹了css利用負margin實現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
對于平均分布的布局，我們一般使用負margin的方法。如下圖，就是平均布局。
一般這種情況，我們都是在父元素和子元素之間加上一層div，然后，給這個div設置負margin-right，值為兩個子元素之間的距離。
例如，我們令每個子元素寬度為100px，一共3個子元素，給每個子元素一個margin-right，設為50px，那父元素寬度應為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相當于向右“延伸”了50px，使得son3元素有空間和其他元素在一行。
到此這篇關(guān)于css利用負margin實現(xiàn)平均布局的示例的文章就介紹到這了,更多相關(guān)css 負margin平均布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css 布局 之 兩端布局的實例代碼 （利用父級負的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋2020-06-08
css如何利用負margin技術(shù)實現(xiàn)平均布局
這篇文章主要介紹了css如何利用負margin技術(shù)實現(xiàn)平均布局，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2020-03-09- 這篇文章主要為大家詳細介紹了css布局之負margin妙用及其他實現(xiàn)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
- 這篇文章主要介紹了CSS中使用負margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下2015-07-15
