在 CSS 中移动第一个 div 出现在第二个下答案

【问题标题】：Move The First Div Appear Under the Second One in CSS在 CSS 中移动第一个 div 出现在第二个下
【发布时间】：2012-05-11 21:02:57
【问题描述】：

我的 html 代码如下所示：

一个 wrapper div（百分比宽度，向左浮动）包含：

一个包含文本和链接的 div；
一个包含图像的 div；

问题：我想保持上面的编码顺序，但为了用户体验，我想使用 CSS 反转 div 顺序以获得如下结果：

注意：包装 div 为 20%，向左浮动，然后是该页面上的 4 个其他类似 div。

泰！

这是小提琴链接：

http://jsfiddle.net/sexywebteacher/4sbQf/

【问题讨论】：

如果可能的话，将当前代码发布在 jsfiddle 中会有所帮助。
使包装器 div 相对定位...其他两个 div 的绝对定位。顶部：0px 的图像 div 和底部：0px 的文本 div...
你好，我只是在这个问题上附上了一个小提琴，非常喜欢
为什么不能在 HTML 中交换顺序？
你知道图片的高度吗？

标签： css

【解决方案1】：

http://jsfiddle.net/QGyNN/

HTML

<div id="wrapper">
    <div id="txt">
    </div>
    <div id="img">
    </div>
</div>

CSS

div#wrapper
{
    height:100px;
    width:60px;
    border:1px solid black;
    position:relative;
}
div#txt, div#img
{
    position:absolute;
    margin: 5px;
    width:50px;
}
div#img
{
    top:0px;
    height: 60px;
    border:1px solid red;
}
div#txt
{
    bottom:0px;
    height:20px;
    border:1px solid green;
}

【讨论】：

您只需要一个“float:left;”在你的包装纸上，你很高兴。像这样：jsfiddle.net/4H8nc/3
你好，我试过这段代码，它应该可以工作，但也许你可以看看我的网站。它包含成人内容，我可以将其名称粘贴到小提琴中而不是删除它。那样可以么？很Ty
在我的实际站点上它似乎可以工作，但包装器现在可以控制一切。 PS。在实际站点上，包装器 div 位于另一个包装器内:)
请看一下这个小提琴，我有点新手。 jsfiddle.net/sexywebteacher/4H8nc/4
如果您的子元素具有浮动属性，请确保父元素也具有浮动属性。见jsfiddle.net/4H8nc/5 如果你从#wrap div 中删除float 属性，它的高度将被计算为0。