CSS中我們經(jīng)常會用到div,而如何將div平均分成幾等分卻是一個常見問題。
下面我們來介紹三種常用的方法。
第一種:使用float浮動。
.container{
overflow: hidden;
}
.item{
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 0 10px;
}
第二種:使用display:inline-block。
.container{
font-size: 0;
letter-spacing: -4px;
}
.item{
display: inline-block;
width: 33.33%;
box-sizing: border-box;
padding: 0 10px;
letter-spacing: normal;
vertical-align: top;
}
第三種:使用flex布局。
.container{
display: flex;
}
.item{
flex: 1;
box-sizing: border-box;
padding: 0 10px;
}
以上三種方法都可以將div平均分成3等份,只需要根據(jù)需求修改對應的百分比即可。