给定一个模板,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中,将第一个div向左或向右浮动。第二个div与第一个div一样向左或向右浮动。应用clear:向左或向右,与上面两个div的第二个div相同。

例如:

#firstDiv {
    float: left;
}

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

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

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

或者更一般地说:

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

这只能用CSS来完成!

请检查我对这个类似问题的回答:

https://stackoverflow.com/a/25462829/1077230

我不想重复我的答案,但它的简短是,父元素需要成为一个flexbox元素。例如:

(此处仅使用webkit供应商前缀)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

然后,通过指示它们的顺序来交换div:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

CSS唯一解决方案 1. 包装的高度应固定或 2. 第二个div的高度应该固定

这里有一个解决方案:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

但我怀疑您有一些内容遵循包装器div…