html - Margin 0 Auto kicking float:right to a new line

Question

嘿伙计们，我正在尝试水平对齐 3 个框，中间有一点空白。为此，我尝试将 float:left 用于第一个框边距：auto 用于中间一个框，将 float:right 用于最后一个框。前两个框显示得非常好，但第三个框在新行上向右浮动。有没有什么办法解决这一问题？谢谢！

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 示例