欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css利用負(fù)margin實(shí)現(xiàn)平均布局的示例

  發(fā)布時(shí)間：2020-11-03 17:27:13   作者：Xie666-byte   我要評(píng)論
這篇文章主要介紹了css利用負(fù)margin實(shí)現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

對(duì)于平均分布的布局，我們一般使用負(fù)margin的方法。如下圖，就是平均布局。

一般這種情況，我們都是在父元素和子元素之間加上一層div，然后，給這個(gè)div設(shè)置負(fù)margin-right，值為兩個(gè)子元素之間的距離。
例如，我們令每個(gè)子元素寬度為100px，一共3個(gè)子元素，給每個(gè)子元素一個(gè)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實(shí)現(xiàn)平均布局的示例的文章就介紹到這了,更多相關(guān)css 負(fù)margin平均布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論