我如何才能重新排序我的div只使用CSS?

给定一个模板，HTML不能修改，因为其他要求，如何可能显示(重新安排)一个div上面的另一个div时，他们不是在HTML的顺序?两个div都包含高度和宽度不同的数据。

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

希望期望的结果是显而易见的:

Content to be above in this situation
Content to be below in this situation
Other elements

当尺寸是固定的，很容易定位他们在需要的地方，但我需要一些想法，当内容是可变的。为了实现这个场景，请将两者的宽度都考虑为100%。

我特别寻找一个css唯一的解决方案(它可能必须满足其他解决方案，如果它不成功)。

接下来还有其他因素。考虑到我演示的有限场景，我提到了一个很好的建议——考虑到它可能是最好的答案，但我也希望确保后面的元素不受影响。

当前回答

正如其他人所说，这不是你想在CSS中做的事情。你可以用绝对的定位和奇怪的边际来蒙混过关，但这不是一个可靠的解决方案。在您的情况下，最好的选择是转向javascript。在jQuery中，这是一个非常简单的任务:

$('#secondDiv').insertBefore('#firstDiv');

或者更一般地说:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

2008-10-20 23:45:35

其他回答

使用css很容易，只需使用display:block和z-index属性

这里有一个例子:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

编辑:为div设置一些背景颜色是很好的，这样可以正确地看到东西。

2012-11-11 14:26:18

这个解决方案只使用CSS，并且适用于可变内容

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

2012-08-22 08:56:23

仅css的解决方案(适用于IE10+) -使用Flexbox的order属性:

演示:http://jsfiddle.net/hqya7q6o/596/

#flex{显示:flex;flex-direction:列;｝ #a {order: 2;｝ #b {order: 1;｝ #c {order: 3;｝ flex < div id = " " > < div id = " " > < / div > b < div id = " b " > < / div > c < div id = " c " > < / div > < / div >

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/order

2015-01-26 22:17:26

在CSS中，将第一个div向左或向右浮动。第二个div与第一个div一样向左或向右浮动。应用clear:向左或向右，与上面两个div的第二个div相同。

例如:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

2011-02-13 12:15:35

在支持pre-flexbox用户代理(主要是旧IE)的同时，绝对没有办法通过CSS来实现你想要的东西——除非:

您知道每个元素的精确渲染高度(如果是这样，您可以完全定位内容)。如果您正在处理动态生成的内容，那么您就不走运了。你知道这些元素的确切数量。同样，如果您需要对动态生成的多个内容块执行此操作，那么您就不走运了，特别是当内容块超过三个左右时。

如果以上为真，那么您可以通过对元素的绝对定位来做您想做的事情

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

同样，如果你不知道至少#firstDiv的高度，你无法通过CSS单独做你想做的事情。如果这些内容是动态的，则必须使用javascript。

2009-02-14 22:45:44

我如何才能重新排序我的div只使用CSS?

推荐文章

最新文章

标签