Question

我想将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;
}

代码位于http://jsfiddle.net/u6KqK/

有更好的解决方案吗？

Answer 1

你使用了父母div的99％（30 + 30 + 30 + 3 + 3 + 3），而不是100％，这就是为什么最右边div的右边距似乎是4％。以下是一些解决方案：

1）将margin-right设置为使用最终百分比：

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

由于旧版浏览器不支持calc，因此我提供了一个基本上适用于所有方案的回退。小提琴：http://jsfiddle.net/u6KqK/7/

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

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

小提琴：http://jsfiddle.net/u6KqK/1/

Answer 2

您可以向中间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%;
}

http://jsfiddle.net/u6KqK/9/

Answer 3

由于你在实际左边有最左边的div，所以最右边也有最右边的零边距

JSfiddle Demo

<强> 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>

<强> CSS

* {
    -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;
}

均匀和水平放置浮动Div

3 个答案: