6

我想知道是否可以仅使用 css 以倒序显示两个 div 元素。没有 html 更改或 javascript 代码，只有 css。

我有以下html：

<div id="container" class="clearfix">
    <div id="right-sidebar">Right</div>
    <div id="left-sidebar">Left</div>
</div>

这个当前的CSS：

#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;
    float: left;
}

#right-sidebar {
    border: 2px solid green;
    float: right;
}

结果显示右侧 div 高于左侧 div。我想交换它们，将左侧显示在右侧上方，保持容器属性（自动计算高度）。

为了用不同的词来解释它，我想只使用 CSS 来实现与通过交换 html 代码中的两个 div 获得的相同结果。

只有css甚至可能吗？[我梦想有一个浮动：底部属性:)]

http://jsfiddle.net/mT7JJ/1/

4

7 回答 7

6

根据this和许多其他人的说法，恐怕你不能只用css交换，但我发现了一些可以在这种情况下帮助你的东西，那就是

所以这将是你对小提琴的编辑

#container {
 display: table; width: 200px; 
 border:1px red solid;
}
#left-sidebar {
 display: table-header-group;
}
#right-sidebar {
 display: table-footer-group;
}
于 2013-07-03T18:28:23.970 回答
2

我能想到的唯一想法是相对/绝对位置。但它不会真正有效

于 2013-07-03T18:24:27.700 回答
1

如前所述，一种现代解决方案是弹性布局。

另一个棘手的可能性是使用转换

webkit 演示

我只是将容器倒置，然后旋转内部 div 以使它们看起来不错。它是在悬停中完成的，以显示净效果。由于 clearfix，悬停有点不稳定，但这与这里无关。

#container:hover {
    -webkit-transform: rotateX(180deg);
}
#container:hover div {
    -webkit-transform: rotateX(180deg);
}

我喜欢回答一个被宣布为不可能的问题:-)

于 2013-07-03T20:41:40.050 回答
0 
<div id="container" class="clearfix">
    <div id="left-sidebar">Left</div>
    <div id="right-sidebar">Right</div>

</div>
#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;

}

#right-sidebar {
    border: 2px solid green;

}

检查右 div 上方的左 div

于 2013-07-03T18:40:37.320 回答
0

使用 css 有两种方法可以做到这一点。弹性和网格。

柔性：

#container {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   justify-content: flex-start;
   flex-direction: row-reverse;
 }

网格：

#container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr))      
}
#left-sidebar {
  order 2
}
#right-sidebar {
  order 1
}
于 2021-08-12T11:05:30.243 回答
0

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

于 2016-12-04T15:50:51.003 回答
0

没有专家和老问题，但用例在特定条件下适用于我来回答这个问题：“仅使用 css 交换 div 订单”

我的回答几乎完全基于 Harry 在此处的回答https://stackoverflow.com/a/31366853/3913379（原始答案 v2）并在子 div 大小相同的条件下进行了如今（Chrome/FF）的测试（用例是main Div 包含两个带有链接图标和文本的 div）。

因此，为了仅使用 CSS 从左到右交换两个 div，反之亦然，我在 X 轴上使用了 css 变换（变换： translateX ），如下所示：

<STYLE type="text/css">
      #Child1Div {transform: translateX(100%);}
      #Child2Div  {transform: translateX(-100%);}
</STYLE>


<div id="MotherDiv" >
    <div id="Child1Div">Context of child one</div>
    <div id="Child2Div">Content of child two</div>
</div>

因此，请注意在一种情况下使用百分比和负值，以实现基本上“交换”。HTML 结构没有改变（并且 JS/JQuery 侦听器不受影响，例如链接的 onClick(...) ）这在某些继承的特殊样式下可能会失败，但简单的情况对我来说效果很好。

样式可以应用于 HEAD 标记或 div 上的内联，也可以通过 JS 动态应用（例如，通过单击按钮或类似的方式交换两个图标/图像）

于 2021-08-12T10:46:20.160 回答