仅用CSS交换DIV位置

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (250)

我试图交换两个div位置的响应式设计(网站看起来不同,具体取决于浏览器的宽度/适用于移动设备)。

现在我有这样:

<div id="first_div"></div>
<div id="second_div"></div>

但是,是否可以交换他们的展示位置,使其看起来像second_div第一个,只使用CSS?HTML保持不变。我尝试过使用浮动和东西,但它似乎没有按照我想要的方式工作。我不想使用绝对定位,因为divs 的高度总是在变化。有没有解决方案,还是没有办法做到这一点?

提问于
用户回答回答于

解决方案非常有效。虽然它不支持旧的IE,但这对我来说并不重要,因为我使用的是响应式的移动设计。它适用于大多数移动浏览器。

我有:

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

这比浮子对我更有效,因为我需要它们互相叠在一起,而且我有大约五个不同的div,我不得不在这个位置上交换。

用户回答回答于

这个问题已经有了一个很好的答案,但本着探索所有可能性的精神,这里有另一种技术,在重新排列元素的同时,仍然允许它们占据空间,这与绝对定位方法不同。

这种方法适用于所有现代浏览器和IE9+

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

扫码关注云+社区

领取腾讯云代金券