仅使用 CSS 交换 DIV 位置

Posted 2023-03-06

【中文标题】仅使用 CSS 交换 DIV 位置

【英文标题】：Swap DIV position with CSS only

【发布时间】：2013-07-01 14:30:44

【问题描述】：

我正在尝试将两个 divs 的位置交换为响应式设计（网站看起来会因浏览器的宽度而异/适合移动设备）。

现在我有这样的东西：

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

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

【问题讨论】：

你担心IE8吗？ (caniuse.com/#feat=css-mediaqueries) 尝试媒体查询。

What is the best way to move an element that's on the top to the bottom in Responsive design的可能重复

这就是我现在用于响应式设计的东西，但我有这些底部 div，当它用于移动设备时，它需要放在首位。

这取决于divs 当前的布局方式。例如，如果first_div 已经有float: left 并且second_div 有float: right，则解决方案非常简单——您只需反转floats 的方向即可。其他布局将更难修复。告诉我们当前的布局。

这些元素后面有什么吗？

【参考方案1】：

你不需要任何花哨的东西。制作第二个 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: block 和 second_div display: none。

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

【讨论】：

这是一个 8 岁的帖子，所以从那时起有些事情发生了变化。另外，他不想用js添加新的div，而是在css中做所有事情

很多东西都变了，但你还没明白我的意思。

【参考方案2】：

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

.content-body 
    display: grid;
    grid-template-areas: " left right ";
    grid-template-columns: 1fr 1fr;

.first_div 
    grid-area: right;

.second 
    grid-area: left;

【参考方案3】：

假设两个元素都有 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%;
  

【参考方案4】：

这个解决方案对我有用：

使用像这样的父元素：

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

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

【参考方案5】：

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

很简单：

.flex-item 
    order: 2;

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

【讨论】：

@Sarfaraj 确保您的 flex: display 处于活动状态，并且命令是 ORDER 而不是 Flex-order。我犯了那个错误

【参考方案6】：

仅使用 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/

【参考方案7】：

这个问题已经有了很好的答案，但是本着探索所有可能性的精神，这里是另一种重新排序 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

【讨论】：

width: 100% 行没用：你不能给display: table 元素指定宽度。

我的错。它不在我做的例子中，一定是不小心爬到这里的。不管它是否在那里，该方法仍然有效。 :)

在处理表单输入时，通常在其上方有标签，但在 DOM 中位于之前（因此我们可以根据输入的状态定位标签），这非常有用！也非常适合浮动标签。

这是一种非常棒的非弹性方式。即使在 2019 年，我们也能获得 4% 的 IE9 流量。

【参考方案8】：

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

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


.section1,
.section2 
  height: auto;

【参考方案9】：

有人给我链接了这个：What is the best way to move an element that's on the top to the bottom in Responsive design。

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

【讨论】：

这里是an example，介绍如何使用 flexbox 方法。

谢谢你的例子。我能够对其进行编辑以实现我的目标：jsfiddle.net/5rd9xwsc/73

jsfiddle.net/5rd9xwsc/75 是我尝试做的一个更好的例子，即：图像始终与文本交替显示，即使您调整窗口大小。

我非常喜欢 ***，我能够搜索我的活动并再次找到这篇文章。我更新了小提琴，因为jsfiddle.net/5rd9xwsc/82 更接近我想要做的（在 WordPress 中）。

提醒一下 - 这个解决方案乍一看可能看起来很复杂或脆弱，但实际上非常简单。供应商特定的样式使它看起来“笨重”。在我的用例中，我什至不需要供应商特定的样式。感谢蜻蜓的救命稻草！

【参考方案10】：

假设没有什么跟随他们

如果这两个div 元素基本上是您的主要布局元素，并且在 html 中没有跟随它们，那么有一个纯 HMTL/CSS 解决方案，takes the normal order shown in this fiddle 并且能够使用一个额外的包装器flip it vertically as shown in this fiddle 987654326@像这样：

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，这将不起作用，如 this fiddle illustrates the issue if the following elements are not wrapped（它们与 #first_div 重叠）和 this fiddle illustrates the issue if the following elements are also wrapped（#first_div 与 both @987654331 改变位置@ 和以下元素）。这就是为什么，根据您的用例，此方法可能有效，也可能无效。

对于一个整体布局方案，其他元素都存在于两个div里面的情况下，它可以工作。对于其他场景，就不行了。