百分比 页面布局问题

Question

4个一模一样的盒子（图画的不准，别见怪） 需要平均的展示在页面上，要怎么设置width才能实现？

div{

width: 24%;
height: 50px;
float: left;
border:1px solid #ccc;
margin-right: 1%;

}
.last{

margin-right: -1%;

}
我这样设置起不到作用。

Answer 1

box-sizing: border-box;

Answer 2

减去 border的宽度

div{
width: calc(24% - 2px);
}

Answer 3

这个情况使用flex是最完美的解决方法。
css:

.box {
    width: 100%;
    display: flex; 
    flex-wrap: nowrap;
    justify-content: space-around;
}

html:

<div class="box">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

</div>

Answer 4

大div{float:left},四个小div{width: 24%;height: 50px;float: left;border:1px solid #ccc;
margin-right: 1%;}。之所以没效果，小div脱离了文档流，外面容器没有脱离

Answer 5

采用flex布局，项目会自动缩放，项目可以设置flex-grow： 1， 使之等比排布

Answer 6

推荐使用flex弹性盒子；如果是移动端的话。pc端的话；boxs-sizing:border-box；试一试，看行不行。