仅使用 CSS 交换 DIV 位置 [英] Swap DIV position with CSS only

问题描述

我正在尝试为响应式设计交换两个 div 的位置(网站看起来因浏览器的宽度而异/适合移动设备).

现在我有这样的事情:

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

但是是否可以交换它们的位置以使其看起来像 second_div 是第一个，仅使用 CSS?HTML 保持不变.我试过使用浮动和东西，但它似乎并没有像我想要的那样工作.我不想使用绝对定位，因为 div 的高度总是在变化.是否有任何解决方案，或者根本没有办法做到这一点?

解决方案

有人给我链接了这个:在响应式设计中将顶部元素移动到底部的最佳方式是什么.

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

基本上，我有这个:

@media (max-width: 30em) {.容器 {显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-box-orient:垂直；-moz-box-orient:垂直；-webkit-flex-direction: 列；-ms-flex-direction: 列；弹性方向:列；/* 选修的 */-webkit-box-align:开始；-moz-box-align:开始；-ms-flex-align:开始；-webkit-align-items: flex-start;对齐项目:flex-start；}.container .first_div {-webkit-box-ordinal-group: 2;-moz-box-ordinal-group: 2;-ms-flex-order: 2;-webkit-order: 2;订单:2；}.container .second_div {-webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-ms-flex-order: 1;-webkit-order: 1;订单:1；}}

这对我来说比浮动效果更好，因为我需要将它们堆叠在一起，而且我有大约五个不同的 div，我不得不在它们的位置周围交换.

I'm trying to swap two divs' locations for responsive design (the site looks different depending on width of the browser/good for mobile).

Right now I have something like this:

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

But would it be possible to swap their placements to make it look like second_div is first, using CSS only? The HTML stays the same. I've tried using floats and stuff but it doesn't seem to work the way I want it to. I don't want to use absolute positioning because the heights of the divs are always changing. Are there any solutions, or is there just no way to do this?

解决方案

Someone linked me this: What is the best way to move an element that's on the top to the bottom in Responsive design.

The solution in that worked perfectly. Though it doesn’t support old IE, that doesn’t matter for me, since I’m using responsive design for mobile. And it works for most mobile browsers.

Basically, I had this:

@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;
  }
}

This worked better than floats for me, because I needed them stacked on top of each other and I had about five different divs that I had to swap around the position of.

这篇关于仅使用 CSS 交换 DIV 位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！