Question

这是我为证明这个问题而创建的jfiddle：

请编辑代码，不要从头开始创建新示例，除非它与我的示例具有相同的结构。

Answer 1

放置右侧div，首先位于左上方和中间位置。

    <div id="right" style="height:100px; width:100px">

</div>

    <div id="left" style="height:100px; width:100px">

</div>

    <div id="center" style="height:100px; width:100px">

</div>

Answer 2

这里有解决方案：http://jsfiddle.net/ew3nD/5/

HTML

<div class="paging-toolbar">
    <div id="right"></div>
    <div id="left"></div>
    <div id="center"></div>
</div>

CSS

.paging-toolbar {
    width: 100%;
}
.paging-toolbar div{
    height:100px;
    width:100px;
}
#right
{
    float: right;
    background:#f00;
}
#left
{
    float: left;
    background:#f00;
}
#center
{
    background:#f00;
    margin: 0 auto;
}

（我稍微清理你的代码）

Answer 3

这是一种不同的方法，您可以使用margin: 0 auto，而不是依赖position: absolute和浮点数。如果元素的宽度发生变化，您只需更改margin-left中的.b2：

http://jsfiddle.net/elclanrs/haGeC/

<div id="container">
    <div class="box b1"></div>
    <div class="box b2"></div>
    <div class="box b3"></div>
</div>

的CSS：

#container {
    position: relative;
    width: 100%;
}
.box {
    height: 100px;
    width: 100px;
    background: red;
    display: inline-block;
}
.b1, .b2, .b3 {
    position: absolute;
}
.b2 {
    left: 50%;
    margin-left: -50px; /* width 100/2 */
}
.b1 { left: 0; }
.b3 { right: 0; }

如何使包含div中的这三个div在chrome中正确浮动 - 第三个div低于前两个

3 个答案: