摘要：怎樣讓多個元素貼邊平分為什么會有這個疑問呢首先說明一下，接觸前端有一年的時間了，自認為對靜態布局不在話下，果然，自負的人最容易被打臉吶，剛換了一份工作，公司對前端要求比較嚴格。

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

????????就是實現下面這種結果，看著真的沒什么難度，不過因為我是用bs的柵格來布局的，所以需要修改bs的padding的值，這種方法不算明智，所以我思考和匯總了幾種實現的做法。都是很基礎的。

        

            
1
            
2
            
3
            
4
        
/*
 * 怎樣讓四個沒有內邊距和邊框的元素貼邊平分？
 */
        .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%;
        }

這個是最基礎的，也是最簡單的，沒什么好說的了，使用最簡單的平分寬度實現。效果圖：

????????這個就有意思了，每次在開發過程中，只要設置width+padding+border，問題就接踵而來了。不是元素被擠到下一行，就是這一行的寬度沒有平分完。所以我使用了下面的幾種方法。
????????先設置基礎樣式：

        

            
1
            
2
            
3
            
4
        
/*
* 怎樣讓四個有沒有內邊距和邊框的元素貼邊平分？
 */
    /*基礎樣式*/
    .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%;
            }

居中方式二:浮動+怪異盒模型+平分寬度

/*居中方式二:浮動+怪異盒模型+平分寬度*/
            .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%;
            }

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

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

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

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

以上四種方式實現的效果都是這樣的：

最后，只有掌握最基礎最底層的技術，才能在開發過程中更高效地完成任務。勤勞能致富，后面我要更努力去思考更有用的知識。：)