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 example

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

1 个答案: