移动第一个Div显示在CSS的第二个 [英] Move The First Div Appear Under the Second One in CSS

问题描述

我的HTML代码如下所示：

My html code looks like this:

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

A wrapper div (percent width, floated left) containing:

1. 一个div包含文本和链接;


2. 一个包含图像的Div;

问题：
我想保持上面的编码顺序，但是对于用户体验，我想使用CSS可以得到类似这样的东西：

The problem: I want to keep the coding order like above, but for user experience I want to inverse the divs order using CSS to get something like this:

注意：wrapper div是20％，左浮，后面是其他4个类似的div。

Note: the wrapper div is 20%, floated left, followed by 4 other similar divs on that page.

Ty！

这是小提琴链接：

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

推荐答案

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

这篇关于移动第一个Div显示在CSS的第二个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！