在CSS中将第一个div移动到第二个div下面显示

Question

我的html代码如下：

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

1. 一个包含文本和链接的div;
2. 一个包含图像的div;

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

注意：包裹div为20％，左浮动，在该页面上跟随4个其他类似的div。

谢谢！

这是 fiddle 的链接:

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

- webmasters

---

将包装器 div 设为相对定位...另外两个 div 采用绝对定位。图片 div 的 top:0px，文本 div 的 bottom:0px... - Bongs

你好，我刚刚在问题中附上了一个Fiddle，非常感谢。 - webmasters

你知道你的图片高度吗？ - n1313

不，一切都是流动的，网站会重新调整分辨率。 - webmasters

Thirtydot，为了SEO的目的，谷歌非常重视第一个链接，我希望它是文本链接而不是图像链接。谢谢。 - webmasters

Answer 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;
}​

- Bongs

---

你只需要在你的包装器上加上 "float:left;"，就可以了。像这样：http://jsfiddle.net/4H8nc/3/ - Andrew Grothe

你好，我尝试了这段代码，应该可以工作，但也许你可以看一下我的网站。它包含成人内容，我可以将其名称粘贴到fiddle中，然后再删除它。可以吗？非常感谢。 - webmasters

在我的实际网站上，它似乎可以工作，但包装器现在覆盖了所有内容。另外，在实际网站上，包装器div位于另一个包装器内部:) - webmasters

请看一下这个fiddle，我有点新手。http://jsfiddle.net/sexywebteacher/4H8nc/4/ - webmasters

如果您的子元素具有浮动属性，请确保父元素也具有浮动属性。请参见http://jsfiddle.net/4H8nc/5/。如果您从“#wrap” div中删除“float”属性，则其高度将被计算为0。 - Bongs