摘要：怎樣讓多個(gè)元素貼邊平分為什么會(huì)有這個(gè)疑問(wèn)呢首先說(shuō)明一下，接觸前端有一年的時(shí)間了，自認(rèn)為對(duì)靜態(tài)布局不在話下，果然，自負(fù)的人最容易被打臉吶，剛換了一份工作，公司對(duì)前端要求比較嚴(yán)格。

????????為什么會(huì)有這個(gè)疑問(wèn)呢？首先說(shuō)明一下，接觸前端有一年的時(shí)間了，自認(rèn)為對(duì)靜態(tài)布局不在話下，果然，自負(fù)的人最容易被打臉吶，剛換了一份工作，公司對(duì)前端要求比較嚴(yán)格。
????????公司使用的是bootstrap開(kāi)發(fā)，我們都知道bootstrap框架最核心的是它的柵格系統(tǒng)，我當(dāng)然也很喜歡這個(gè)啦，不過(guò)最近UI給我的設(shè)計(jì)圖總是和bootstrap相矛盾，就好比說(shuō)，有個(gè)模塊需要每一個(gè)元素在移動(dòng)端和屏幕之間有固定的間距，但是在響應(yīng)到pc端時(shí)，要在有效寬度內(nèi)貼邊對(duì)齊。這就很扯淡啦。我畫(huà)個(gè)圖表示一下內(nèi)心的狂躁......

????????就是實(shí)現(xiàn)下面這種結(jié)果，看著真的沒(méi)什么難度，不過(guò)因?yàn)槲沂怯胋s的柵格來(lái)布局的，所以需要修改bs的padding的值，這種方法不算明智，所以我思考和匯總了幾種實(shí)現(xiàn)的做法。都是很基礎(chǔ)的。

        

            
1
            
2
            
3
            
4
        
/*
 * 怎樣讓四個(gè)沒(méi)有內(nèi)邊距和邊框的元素貼邊平分？
 */
        .box{
            width: 1170px;
            margin: 30px auto 0;
            border:1px solid #00a09d;
            font-size: 0;
        }
        .box>div{
            display: inline-block;
            font-size: 16px;
            width:23.5%;
            height: 100px;
            background: #ffffd;
            text-align: center;
        }
        .box>div:nth-child(n+2){
            margin-left:2%;
        }

這個(gè)是最基礎(chǔ)的，也是最簡(jiǎn)單的，沒(méi)什么好說(shuō)的了，使用最簡(jiǎn)單的平分寬度實(shí)現(xiàn)。效果圖：

????????這個(gè)就有意思了，每次在開(kāi)發(fā)過(guò)程中，只要設(shè)置width+padding+border，問(wèn)題就接踵而來(lái)了。不是元素被擠到下一行，就是這一行的寬度沒(méi)有平分完。所以我使用了下面的幾種方法。
????????先設(shè)置基礎(chǔ)樣式：

        

            
1
            
2
            
3
            
4
        
/*
* 怎樣讓四個(gè)有沒(méi)有內(nèi)邊距和邊框的元素貼邊平分？
 */
    /*基礎(chǔ)樣式*/
    .div-box{
        width: 1170px;
        margin: 30px auto 0;
        border: 1px solid #000;
    }
    .div-box div{
        width: 150px;
        height: 150px;
        background: #ffffd;
        padding: 15px;
        border: 1px solid #000;
        text-align: center;
    }

居中方式一 : 怪異盒模型+平分寬度

/*居中方式一:怪異盒模型+平分寬度*/
            .div-box1 div{
                box-sizing: border-box;
            }
            .div-box1{
                font-size: 0;
            }
            .div-box1 div{
                display: inline-block;
                font-size: 16px;
                width: 23.5%;
            }
            .div-box1 div:nth-child(n+2){
                margin-left:2%;
            }

居中方式二:浮動(dòng)+怪異盒模型+平分寬度

/*居中方式二:浮動(dòng)+怪異盒模型+平分寬度*/
            .div-box2::after{
                content: "";
                display: block;
                clear: both;
            }
            .div-box2 div{
                box-sizing: border-box;
                float: left;
                width: 23.5%;
            }
            .div-box2 div:nth-child(n+2){
                margin-left:2%;
            }

居中方式三:彈性盒子（用這個(gè)最好啦）

/*居中方式三:彈性盒子（用這個(gè)最好啦）*/
        .div-box3{    
            display: flex;
            /*flex-direction:row;  //子元素的排列方向，默認(rèn)是row  */  
            /*flex-wrap:nowrap;    //子元素超出父級(jí)后是否換行，默認(rèn)不換行，設(shè)置的寬度會(huì)失效  */  
            /*flex-flow:row nowrap //上面兩個(gè)屬性的復(fù)合寫(xiě)法  */
            /*子元素在父元素上的對(duì)其方式:flex-start前對(duì)齊||flex-end后對(duì)齊||center居中對(duì)齊||space-between和邊緣無(wú)間距對(duì)齊||space-around和邊緣有間距對(duì)齊*/
                justify-content: space-between;  
            }
            .div-box3>div{
                width: 23%;
            }
            .div-box3>div:nth-child(n+2){
                margin-left: 2%;
            }

居中方式四:寬度屬性計(jì)算（不提倡，兼容性不好）

/*居中方式四:寬度屬性計(jì)算（不提倡，兼容性不好）*/
            .div-box4{
                font-size: 0;
            }
            .div-box4>div{
                display: inline-block;
                font-size: 16px;
                width: calc(23.5% - 32px); /*數(shù)學(xué)符號(hào)之間一定要有空格*/
            }
            .div-box4>div:nth-child(n+2){
                margin-left: 2%;
            }

以上四種方式實(shí)現(xiàn)的效果都是這樣的：

最后，只有掌握最基礎(chǔ)最底層的技術(shù)，才能在開(kāi)發(fā)過(guò)程中更高效地完成任務(wù)。勤勞能致富，后面我要更努力去思考更有用的知識(shí)。：)