Question

说我有......

<div id="A"></div>
<div id="B"></div>

最终用户如何在浏览器上查看div A顶部的div？

我正在尝试使用CSS而不编辑html。

Answer 1

您可以使用flex-box和order来实现您的目标

body {
  display: flex;
  flex-wrap:wrap;
}

#A {
  width: 100%;
  height:50px;
  background: red;
  color:white;
  order: 2;
}

#B {
  width: 100%;
  height:50px;
  background: black;
  color:white;
  order: 1;
}

<div id="A">A</div>
<div id="B">B</div>

Answer 2

您需要将display:flex;和flex-direction:column-reverse;添加到两个div的父级。

body{
    display:flex;
    flex-direction:column-reverse;
}

或者您可以使用order属性手动选择div的顺序：

body {
  display: flex;
}

#A {
  order: 2;
}

#B {
  order: 1;
}

Answer 3

使用CSS3 flex更改flex元素的位置，可以使用order property，

来完成

CSS order属性指定用于布置flex项的顺序在他们的弹性容器中。

＆＃13;

#box{
	display:flex;
	width:100%;
	flex-direction:column;
}
.A{
	order:2;
  background:#111;
  color:#fff;
}
.B{
	order:1;
  background:#111;
  color:#fff;
}

＆＃13;

<div id="box">
<div class="A">A</div>
<div class="B">B</div>
</div>

＆＃13;

Answer 4

在CSS中执行此操作的方法：

容器必须具有display:flex属性

然后：

#A{
   order:2;
}

#B{
   order:1;
}

您也可以使用jQuery实现此目的

$('#B:parent').each(function () {
    $(this).insertBefore($(this).prev('#A'));
});

Answer 5

这样做是不洁净的，但是你去（不需要容器元素）

#A {
  display: table-footer-group;
}

#B {
  display: table-header-group;
}

<div id="A">A</div>
<div id="B">B</div>

在第二个DIV下显示第一个DIV

5 个答案: