如何用CSS重新排序我的div？

Question

给定一个模板,由于其他要求无法修改HTML,如何在HTML中不按顺序显示(重新排列)div另一个上面的模板div？两者都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的解决方案(如果不能解决的话,它可能必须满足其他解决方案).

此后还有其他元素.鉴于我所展示的有限场景,我们提到了一个很好的建议 - 假设它可能是最好的答案,但我也希望确保后面的元素不会受到影响.

Answer 1

此解决方案仅使用CSS并使用可变内容

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

Answer 2

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

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

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

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

Answer 3

正如其他人所说,这不是你想要在CSS中做的事情.你可以用绝对定位和奇怪的边距来捏造它,但它不是一个强大的解决方案.在您的情况下,最好的选择是转向JavaScript.在jQuery中,这是一个非常简单的任务:

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

或更一般地说:

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

Answer 4

这可以使用Flexbox完成.

创建一个同时应用display:flex和flex-flow:column-reverse的容器.

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

资料来源:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

Answer 5

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

1. 您知道每个元素的确切渲染高度(如果是这样,您可以绝对定位内容).如果你正在处理动态生成的内容,那你就不走运了.
2. 你知道这些元素的确切数量.同样,如果你需要为动态生成的几个内容块执行此操作,那么运气不好,特别是如果有超过三个左右的内容.

如果以上都是真的那么你可以通过绝对定位元素来做你想要的 -

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

再说一遍,如果你不知道至少#firstDiv的高度,你无法通过CSS单独做你想做的事.如果这些内容中的任何内容是动态的,您将必须使用javascript.

Answer 6

这是一个解决方案:

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

但我怀疑你有一些内容跟随包装div ...

Answer 7

您可以使用Flex

#wrapper {
  display: flex;
  flex-direction: column;
}

#firstDiv {
  order: 1;
}

#secondDiv {
  order: 0;
}

<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>

Answer 8

使用CSS3 flexbox布局模块,您可以订购div.

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

Answer 9

如果你只使用css，你可以使用flex。

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}

<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>

Answer 10

如果你知道,或者可以强制执行to-be-upper元素的大小,你可以使用

position : absolute;

在你的CSS和divs他们的位置.

否则javascript似乎是唯一的出路:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

或类似的东西.

编辑:我刚发现这可能有用:w3文件css3 move-to

Answer 11

负顶部边距可以实现此效果,但需要为每个页面定制它们.例如,这个标记......

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

......而这个CSS ......

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

...会允许你将第二段拉到第一段之上.

当然,您必须手动调整CSS以获得不同的描述长度,以便介绍段落跳过适当的数量,但如果您对其他部分的控制有限并且完全控制标记和CSS,那么这可能是一个选项.

Answer 12

仅针对移动设备订购，并保留桌面设备的本机顺序：

// html

<div>
  <div class="gridInverseMobile1">First</div>
  <div class="gridInverseMobile1">Second</div>
</div>

// CSS

@media only screen and (max-width: 960px) {
  .gridInverseMobile1 {
    order: 2;
    -webkit-order: 2;
  }
  .gridInverseMobile2 {
    order: 1;
    -webkit-order: 1;
  }
}

结果：

Desktop: First | Second
Mobile: Second | First

来源： https: //www.w3schools.com/cssref/css3_pr_order.asp

Answer 13

好吧，通过一些绝对定位和一些不可靠的边距设置，我可以接近，但它并不完美或漂亮：

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

“margin-top: 4em”是特别令人讨厌的一点：这个边距需要根据firstDiv中的内容量进行调整。根据您的具体要求，这可能是可能的，但无论如何我希望有人能够在此基础上构建可靠的解决方案。

Eric 关于 JavaScript 的评论可能应该继续下去。