保证金0自动踢浮动:右转到新线

Question

嘿伙计们,我试图水平对齐3个盒子,中间有一点白色空间.为此,我尝试使用float:left表示第一个框边距:auto表示中间边框,float:右边表示最后一个框.前两个框显示完全正常,但第三个框在新线上向右浮动.有没有什么办法解决这一问题？谢谢!

HTML:

    <div class="boxQ">
        <p class="boxText">quality.</p>
    </div>

    <div class="boxS">
        <p class="boxText">speed.</p>
    </div>

    <div class="boxSim">
        <p class="boxText">simplicity.</p>
    </div>

CSS:

.boxQ {
    float:left;
    width:30%;
    height:400px;
    background-color:#C60;
}

.boxS {
    margin: 0 auto;
    width:30%;
    height:400px;
    background-color:#6CC;
}

.boxSim {
    float:right;
    width:30%;
    height:400px;
    background-color:#FC6;

}

Answer 1

只需重新排序您的div(无需更改CSS):

<div class="boxQ">
    <p class="boxText">quality.</p>
</div>
<div class="boxSim">
    <p class="boxText">simplicity.</p>
</div>
<div class="boxS">
    <p class="boxText">speed.</p>
</div>

jsFiddle例子