父元素宽度一定，子元素完美均分父级宽度

我们都是爱美的生物，大多数要求对一个东西进行分割时，我们都会尽可能的均分它。在页面中，一个div盒子有的固定像素宽度，有的为百分比。如何能很好的均分一个div呢？

---

以下将提供五个均分父元素的方法,其中 方法四flex布局为常用

---

先提供原始代码及其展示：
为了展示有所区别，便于观察，添加了padding，不同的子元素添加不同的border颜色
html:

<div class = "farther">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div>

css:

.farther {
	border: 2px solid rgb(98, 0, 255);
	padding: 5px;
}
.farther div:nth-of-type(1){border: 2px solid #ff0000;}
.farther div:nth-of-type(2){border: 2px solid #00ff00;}
.farther div:nth-of-type(3){border: 2px solid #ff009d;}

原始效果为：

下面我们将child1，child2，child3实现均分父盒子的宽度

---

所需要实现的效果：

方法一：浮动布局+百分比

将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比，如100/3=33.3%
注意：
！子元素浮动会造成 高度坍塌 ，需要对父元素使用overflow:hidden;
！当设置了border或其他值后，子元素的宽度将 大于 所设置的宽度，还需要设置box-sizing:border-box
css代码：

.farther div {
    float: left;
    width: 33.3%;
    box-sizing: border-box;/*消除border等对盒子宽度的影响*/
}
.farther {  overflow: hidden;}

方法二：行内元素（inline-block）+ 百分比

类似于方法一，完美均分时子元素需要设置box-sizing:border-box，但是此方法不会造成高度坍塌
css代码：

.farther div {
    display: inline-block;
	width: 33.3%;
    box-sizing: border-box;
}

但是设置为inline-block后，元素之间会产生一个 空白间隙 ，使之无法均分父元素,如图

**这时候简单粗暴的方法为更改html代码 不换行 **

<div class="farther">
        <div class="child">child1</div><div class="child">child2</div><div class="child">child3</div>
    </div>
    <!-- 失败的方法二
    	<div class="farther">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div> -->

这样就能实现没有空白，当然也有别的方法解决inline-block的留白。

方法三：父元素 display:table + 子元素 display:table-cell

不会造成高度坍塌，也不用设置box-sizing，但是对父元素的宽度有所设置。不然父元素的宽度只会为子元素的长度之和。
css代码：

.farther {
    display: table;
    width: 300px;
}
.farther div {
    display: table-cell;
    /* box-sizing: border-box; 不用设置*/
}

方法四：常用！采用dispalay:flex；flex布局

如今flex布局能够满足99%所想要的布局效果，并且为弹性布局，很方便！
css代码：

.farther div { flex:1;}
.farther {  display: flex;}

方法五：栅格系统（bootstrap框架）

首先需要引入bootstrap相关资源，在栅格系统中会将一行等分为12份，col-md-4为占4/12

<div class="farther">
        <div class="child col-md-4">child1</div>
        <div class="child col-md-4">child2</div>
        <div class="child col-md-4">child3</div>
    </div>