Css 水平均匀地放置浮动Div

我想把3个div均匀地放在另一个div中。但是，我不能去掉最后一个浮动框的右边距。而且，它们之间的空间在我看来并不合适

<div class="page">
    <div class="box">
        <div class="b">b1</div>
        <div class="b">b2</div>
        <div class="b">b3</div>
        <div style="clear:both;"></div>
    </div>
</div>

.page{
    background-color: green;
    padding: 10px;
}


.box{
    background-color: blue;
}

.b{
    width: 30%;
    margin-right: 3%;
    background-color: #999;
    float: left;
    height: 100px;
}

b1
b2
b3
.第页{
背景颜色：绿色；
填充：10px；
}
.盒子{
背景颜色：蓝色；
}
.b{
宽度：30%；
保证金权利：3%；
背景色：#999；
浮动：左；
高度：100px；
}

代码位于

有更好的解决办法吗

您使用的是父div的99%（30+30+30+3+3+3），而不是100%，因此最右边div的右边距似乎是4%。以下是一些解决方案：

1） 将

边距设置为右

以使用最终百分比：

.b{
    width: 30%;
    margin-right: 3.3333333333%;
    margin-right: calc(10%/3);
    background-color: #999;
    float: left;
    height: 100px;
}

由于较旧的浏览器不支持

calc

，因此我提供了一个基本上适用于所有场景的备用方法。小提琴：

2） 在第一个div的左侧添加1%的边距：

.b:first-of-type{
    margin-left:1%
}

---

Fiddle:

您可以在中间div中添加第二个类，并在该类中添加边距。这样一来，它只适用于中产阶级

<div class="page">
    <div class="box">
        <div class="b">b1</div>
        <div class="b middle">b2</div>
        <div class="b">b3</div>
        <div style="clear:both;"></div>
    </div>
</div>

.page{
    background-color: green;
    padding: 10px;
}


.box{
    background-color: blue;
}

.b{
    width: 30%;
    background-color: #999;
    float: left;
    height: 100px;
}
.middle{
    margin-right: 5%;
    margin-left: 5%;
}

b1
b2
b3
.第页{
背景颜色：绿色；
填充：10px；
}
.盒子{
背景颜色：蓝色；
}
.b{
宽度：30%；
背景色：#999；
浮动：左；
高度：100px；
}
.中{
保证金权利：5%；
左缘：5%；
}

---

因为最左边的div位于实际的左边，所以将最右边的div也设置在最右边，且边距为零是有意义的

HTML

<div class="page">
    <div class="box">
        <div class="b">b1</div>
        <div class="b">b2</div>
        <div class="b">b3</div> /* cleafix div removed */
    </div>
</div>

---

你可能会有一段艰难的时间，因为30%=90%的跳水幅度，3%的保证金=99%，所以还有1%的跳水幅度。我个人会忘记浮动，而使用display:inline块，在父对象上使用文本对齐中心。这样所有的div都应该居中并在同一条线上

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.page{
    background-color: green;
    padding: 10px;
    overflow:hidden; /* quick clearfix */
}


.box{
    background-color: blue;
}

.b{
    width: 30%;
    margin-left: 5%;  /* (100% - 3x30%)/2 */
    background-color: #999;
    float: left;
    height: 100px;
}
.box div:first-child {
    margin-left: 0;
}