Html 将div重新定位到前一个元素上方

在这个设置中，第三个div出现在第二个div的右侧，这是可以理解的，尽管第一个div的右侧有它的空间-它不会出现在第二个div的上方

我如何让第三个div坐在当前黑色空间中div one的右侧，而不：

使用绝对/相对定位 依靠我的真实世界中的高度值 这是一个世界性的例子 如果不重新排列div，我从语义上理解这不是最佳实践，但这是为了一些非常具体的东西

---

谢谢你的一、二、三分区的总宽度为600px 3x200px，三分区的总宽度为100px，三分区的总宽度为500px-你的包装器只允许300px，所以只需将其宽度更改为100px即可：

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

现在它是粉红色的：-

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

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

在此处查找工作小提琴： 这对我很有效

#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，我认为你应该增加一个位置：相对；去三区

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

---

希望能有帮助。再见

我也有这个问题，老实说，有一个真正简单的解决办法，这是不符合逻辑的。 将div 3向右浮动，然后按1,2,3的顺序将div放在第一位。所以它们出现了：3，1，2。 这样，它做的第一件事是向右浮动，下一件事是向左浮动其他的。 令人困惑这是代码

您需要更改的css部分：

HTML：

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

---

希望这对你有帮助

@ezmilhouse:他没有说他想移动二级，所以我猜他没有。他只想要三个挨着一个。不过我很高兴被纠正。是的，我知道如果我将所有宽度设置为wrapper width/3，我可以将它们放入包装器中，但我希望它们的值保持smae。实际上，我希望第二组出现在第三组之前。那么，为什么不在开始向下投票之前对问题做一点澄清呢？谢谢，但你是对的，这取决于高度值。如果你不知道Div1和Div2的高度，这是不可能的。你愿意使用一点javascript吗？考虑到你的限制，这将是唯一可能的方法。是的，当然，这是唯一的方法。虽然如果是这样，我可能会完全改变它的工作方式，使它不依赖于javascript——这可能是我无论如何都应该做的，因为它在语义上不正确——但我仍然有兴趣知道？是的，这会起作用，尽管它忽略了无需重新排序的div点。如果我可以重新排序div，我只需要切换div 2和div 3，它也会工作。使用reordering，你的意思是它应该总是1,2,3而不是3,1,2？

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