我们都是爱美的生物,大多数要求对一个东西进行分割时,我们都会尽可能的均分它。在页面中,一个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>