Question

在这个设置http://jsfiddle.net/PRX88/10/中，thrid div可以理解地出现在第二个div的右边，虽然它在第一个div的右边有空间 - 它停止出现在第二个div的上方。

我如何让第三个div位于div的右边（在当前的黑色空间中），而不是：

使用绝对/相对定位
依靠身高值（在我的真实情况中）世界的例子，这是可变的）
没有重新排序div（我从语义上理解这不是最佳实践，但它是针对某些非常具体的事情）

由于

Answer 1

这对我有用。

#wrapper {
        width: 300px;
        background: black;
    }

    #one, #two, #three {
        width: 200px;
        height: 40px;
        background: red;
    }

    #two {
        background: yellow;
    }

    #three {
        width: 100px;
        background: pink;
        margin: -80px 0px 0px 200px;
    }

嗨，我尝试使用负边距，可变高度的要求可能会让这个解决方案变得有点棘手。和IE7我认为你应该添加位置：相对;到#three div。

所以这是一个解决方案，不确定它是否适合你。

希望它有所帮助。再见

Answer 2

我也有这个问题，说实话，有一个真正简单的解决方法，这是不合逻辑的。你将div 3向右浮动，并将div放在1,2,3顺序中。所以它们出现了：3,1,2。这样做的第一件事就是向右浮动，接下来它做的就是将其他东西漂浮在左边。混乱？这是代码。

您需要更改的css部分：

 #three {
    width: 100px;
    background: pink;
    float: right;
 }

HTML：

<div id="wrapper">
    <div id="three"></div>
    <div id="one"></div>
    <div id="two"></div>
</div>

希望这会帮助你！

Answer 3

你的div（＃one，＃two，＃three）总宽度为600px（3x200px），＃13ree 100px共计500px - 你的包装只允许300px，所以只需将它们的宽度改为100px：< / p>

#one, #two, #three {
    width: 100px;
    height: 40px;
    background: red;
}

现在是粉红色的： - ）

或将包装器的宽度更改为500px：

#wrapper {
    width: 500px;
    background: black;
}

在这里找到工作小提琴： http://jsfiddle.net/ezmilhouse/zEjaP/2/ http://jsfiddle.net/ezmilhouse/39sfD/

在前面的元素上面重新定位div

3 个答案: