移动第一个分区出现在CSS中的第二个分区

时间:2012-05-02 11:33:42

标签: css

我的HTML代码如下所示:

包装器div (宽度百分比,左侧浮动),包含:

  1. 包含文字和链接的一个div;
  2. 包含图像的一个Div;
  3. 问题: 我想保持上面的编码顺序,但是为了用户体验,我想使用CSS来反转divs顺序,得到这样的结果:

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

    Inverse the order of the divs with CSS

    泰!

    这是小提琴链接:

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

1 个答案:

答案 0 :(得分:4)

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