88

我正在尝试交换两个divs' 位置交换为响应式设计(该站点看起来不同,具体取决于浏览器的宽度/适用于移动设备)。

现在我有这样的事情:

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

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

4

10 回答 10

136

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

其中的解决方案非常有效。虽然它不支持旧的 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 必须围绕其位置进行交换。

于 2013-07-03T20:15:39.307 回答
39

接受的答案适用于大多数浏览器,但由于某种原因,在 iOS Chrome 和 Safari 浏览器上,应该显示第二个的内容被隐藏了。我尝试了其他一些强制内容堆叠的步骤,最终我尝试了以下解决方案,它给了我预期的效果(在移动屏幕上切换内容显示顺序),没有堆叠或隐藏内容的错误:

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}
于 2016-06-10T18:48:03.137 回答
33

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

此方法适用于所有现代浏览器和 IE9+(基本上任何支持 display:table 的浏览器)它有一个缺点,即它最多只能用于 3 个兄弟姐妹。

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

这会将元素从 1,2,3 重新排序为 2,3,1。基本上,显示设置为 table-header-group 的任何内容都将位于顶部,而 table-footer-group 位于底部。自然地 table-row-group 将一个元素放在中间。

这种方法速度快,支持良好,并且比 flexbox 方法需要的 css 少得多,所以如果你只是想为移动布局交换一些项目,那么不要排除这种技术。

您可以在 codepen 上查看现场演示:http: //codepen.io/thepixelninja/pen/eZVgLx

于 2015-10-27T01:53:28.403 回答
10

这个解决方案对我有用:

使用父元素,例如:

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

就我而言,我不必更改需要切换的元素的 css。

于 2019-07-03T10:01:09.960 回答
9

在某些情况下,您可以只使用该flex-box属性order

很简单:

.flex-item {
    order: 2;
}

参见:https ://css-tricks.com/almanac/properties/o/order/

于 2018-06-22T19:25:04.877 回答
8

仅使用 CSS:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/thirtydot/hLUHL/

于 2016-12-04T15:49:46.217 回答
5

假设没有什么跟随他们

如果这两个div元素基本上是您的主要布局元素,并且在 html 中没有跟随它们,那么有一个纯 HMTL/CSS 解决方案采用此小提琴中显示的正常顺序并能够垂直翻转它,如此小提琴所示使用一个额外的包装器div,如下所示:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

如果元素遵循这些 div,这将不起作用,因为这个小提琴说明了如果以下元素没有被包裹(它们被 重叠#first_div)的问题,并且这个小提琴说明如果以下元素也被包裹(改变#first_div位置和以下元素)。这就是为什么,根据您的用例,此方法可能有效,也可能无效。#second_div

对于一个整体布局方案,所有其他元素都存在于两个 div 中,它可以工作。对于其他情况,它不会。

于 2013-07-03T20:26:41.370 回答
1

假设两个元素都有 50% 的宽度,这是我使用的:

CSS:

  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }

html:

<div class="parent">
  <div class="child-1">child1</div>
  <div class="child-2">child2</div>
</div>

示例:https ://jsfiddle.net/gzveri/o6umhj53/

顺便说一句,这种方法适用于一长串元素中的任何 2 个附近元素。例如,我有一长串元素,每行有 2 个项目,我希望交换列表中的每个第 3 和第 4 元素,以便它以国际象棋风格呈现元素,然后我使用以下规则:

  .parent > div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent > div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }
于 2020-07-05T23:55:48.367 回答
0

你不需要任何花哨的东西。制作第二个 div 的副本,并将其放在顶部。像这样

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

当您希望第一个 div 出现在顶部时,给 second_div_copy display: none 。当您希望第二个 div 出现在顶部时,给 second_div_copy display: 块和 second_div display: none 。

真的就是这么简单。还是我错过了什么?

于 2021-12-28T09:28:02.053 回答
0

昨天遇到了同样的问题。就我而言,网格区域效果很好:

.content-body {
    display: grid;
    grid-template-areas: " left right ";
    grid-template-columns: 1fr 1fr;
}
.first_div {
    grid-area: right;
}
.second {
    grid-area: left;
}
于 2021-10-02T09:25:11.397 回答