Question

说我有这样的布局：

<div id="main">            
    <div id="NormalContent">
        {some content which is a fixed length list}
    </div>
    <div id="FeaturedContent">
        {some content which may contain a long list}
    </div>
</div>

我希望将FeaturesContent放在NormalContent之上。

我可以用CSS做到这一点吗？我想我可以使用Javascript吗？

Answer 1

对于非jquery答案

var content = document.getElementById('FeaturedContent');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);

请注意，无需将其从DOM中删除，再次添加它会移动它。

Answer 2

这是使用1行jQuery移动它们的更清晰的方法：

$('#FeaturedContent').prependTo('#main');

Answer 3

在Javascript中，您只需在页面上重新排序即可。

使用CSS，如果它们并排（有某些条件），可以左右交换它们，但不能一个在另一个之上。

Answer 4

如果您确切知道FeaturedContent＆amp;的维度。 NormalContent，你可能能够使用position：relative和玩弄他们的顶级属性。

即

#NormalContent {
  position:relative;
    top:22px;
}

#FeaturedContent {
  position:relative;
    top:-22px;
}

但要使它们流动......嗯......不确定你能做到。

使用jQuery，您可以执行以下操作：

 $("#NormalContent").remove().insertAfter($("#FeaturedContent"));

Answer 5

这个答案似乎起作用了。仅限CSS（3），非常优雅的解决方案。

CSS have a div that's to the right below the left div. Divs are reverse in HTML

在CSS或javascript中更改div顺序

5 个答案: