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

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

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

css:

原始效果为：

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

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

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

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

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

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

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

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

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