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

詳解css使既有浮動(dòng)又有左右margin的多個(gè)元素兩端對(duì)其

  發(fā)布時(shí)間：2018-09-07 15:14:04   作者：heath_learning   我要評(píng)論
這篇文章主要介紹了詳解css使既有浮動(dòng)又有左右margin的多個(gè)元素兩端對(duì)其,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

兩端對(duì)齊效果

如上圖中紅色的9個(gè)div它們中間有間距，而最左邊和最右邊是沒有間距的，這種布局如果使用css3的flex來(lái)實(shí)現(xiàn)是非常簡(jiǎn)單的，而如果要使用float布局就需要一些特殊的技巧了。

實(shí)現(xiàn)原理

紅色的9個(gè)div左浮動(dòng)，左右margin為25px，父容器左右margin為-25px，這樣相當(dāng)于是把父容器拉長(zhǎng)了，因此就達(dá)到了兩端對(duì)齊的效果。Bootstrap的柵格系統(tǒng)就是這么干的，bootstrap要求我們.col-xx-xx的父容器需要為.row，而.row的左右padding就為-15px。

示例代碼

<style type="text/css">
*{margin: 0;padding: 0;}
.container{
    width: 1300px;
    margin: 0 auto;
    background-color: #f90;
}
.header{
    width: 1000px;
    height: 40px;
    margin: 0 auto;
    background-color: #eee;
}
.main{
    width: 1000px;
    margin: 0px auto; 
    background-color: #f60;
}
        
.box{
    /*給.box設(shè)置左右margin為負(fù)的就是為了沖突掉最左邊元素的margin-left和最右邊元素的margin-right*/
    margin: 0 -1.6666667%;
}
.box::after,
.box::before{display: table;content: " ";}
.box::after{clear: both;}
.item{
    width: 30%;
    height: 200px;
    margin: 20px 1.6666667%;
    background-color: #f10;
    float: left;
}
</style>
<div class="container">
<div class="header">下面的元素會(huì)與我對(duì)齊</div>
    <div class="main">
        <div class="box">
            <div class="item">我是第1個(gè)div元素</div>
            <div class="item">我是第2個(gè)div元素</div>
            <div class="item">我是第3個(gè)div元素</div>
            <div class="item">我是第1個(gè)div元素</div>
            <div class="item">我是第2個(gè)div元素</div>
            <div class="item">我是第3個(gè)div元素</div>
        </div>    
    </div>
</div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • css浮動(dòng) float屬性詳解

    浮動(dòng)指的是一個(gè)元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動(dòng) float屬性的相關(guān)知識(shí)，感興趣的朋友一起看看吧
    2020-02-24

  • html/css中float浮動(dòng)的用法實(shí)例詳解

    這篇文章主要介紹了html/css中float浮動(dòng)的用法實(shí)例詳解,需要的朋友可以參考下
    2019-09-10

  • css float left布局換行不正常問(wèn)題的解決

    這篇文章主要介紹了css float left布局換行不正常問(wèn)題的解決的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-06

  • css 布局 之 兩端布局的實(shí)例代碼 （利用父級(jí)負(fù)的margin）

    這篇文章主要介紹了css 布局 之 兩端布局 （利用父級(jí)負(fù)的margin）的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋
    2020-06-08

  • 解決CCS中的margin：top塌陷問(wèn)題

    這篇文章主要介紹了CCS中的margin：top塌陷問(wèn)題,本文通過(guò)實(shí)例截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-27

  • css中子元素設(shè)置margin-top為什么影響了父元素

    這篇文章主要介紹了css中子元素設(shè)置margin-top為什么影響了父元素，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著
    2019-05-22

  • 詳解css外邊距折疊（margin collapsing）

    外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
    2018-10-30

  • CSS 同級(jí)元素position:fixed和margin-top共同使用的問(wèn)題

    這篇文章主要介紹了CSS 同級(jí)元素position:fixed和margin-top共同使用的問(wèn)題的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-13

  • CSS中的float和margin的混合使用示例代碼

    這篇文章主要介紹了CSS中的float和margin的混合使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-06-12

最新評(píng)論