如何使用 css 使 div 1 出现在 div 2 的下方 [重复]答案

【问题标题】：How can i make div 1 appear below in div 2 using css [duplicate]如何使用 css 使 div 1 出现在 div 2 的下方 [重复]
【发布时间】：2019-04-18 12:04:24
【问题描述】：

<div class="1">
<p> THIS IS DIV 1> </p>
<div class="2">
<p> THIS IS DIV 2> </p>

我正在使用一些简码，但问题是它总是出现在所有元素的顶部。

提前谢谢..

【问题讨论】：

请显示更多代码。您当前的代码完全无效，因为您的 div 没有关闭
link 这可能会有所帮助..
请考虑对不起我的坏事

标签： css

【解决方案1】：

您可以使用弹性订单。您必须添加一个容器或使用当前的包含元素并为其赋予 display: flex 属性。

.cont{
  display: flex;
  flex-direction: column;
}

.c1{
  order: 2;
}

.c2{
  order: 1;
}

<div class="cont">
  <div class="c1">
    <p> THIS IS DIV 1> </p>
  </div>
  <div class="c2">
    <p> THIS IS DIV 2> </p>
  </div>
</div>

【讨论】：

顺利谢谢！有用！简单的编码！

【解决方案2】：

首先，您的元素没有正确关闭。所以假设你用这段代码修复它：

<div class="class1">
    <p> THIS IS DIV 1> </p>
</div>
<div class="class2">
    <p> THIS IS DIV 2> </p>
</div>

使用float: right;，他们会交换位置。或者使用弹性显示。

.float {
  border: 1px solid green;
}

.float .class {
  float: right;
  width: 100%;
}

.float:after {
  content: '';
  clear: both;
  display: block;
}

.flex {
  display: flex;
  flex-direction: column-reverse;
  border: 1px solid blue;
}

<div class="float">
    <div class="class class1">
        <p> THIS IS DIV 1> </p>
    </div>
    <div class="class class2">
        <p> THIS IS DIV 2> </p>
    </div>
</div>

<div class="flex">
    <div class="class class1">
        <p> THIS IS DIV 1> </p>
    </div>
    <div class="class class2">
        <p> THIS IS DIV 2> </p>
    </div>
</div>

【讨论】：

【解决方案3】：

试试这个解决方案

HTML：

<div class="one">
   <p></p>
</div>
<div class= "two">
   <p></p>
</div>

还有 CSS：

div {
  width: 200px;
  padding: 100px;
}

div.one {
  background: green;
}

div.two {
  background: red;
}

请注意，我更改了类名，因为 CSS 标识符可能不以数字开头。在 CSS 中，选择器中使用的类名被视为“CSS 标识符”。因此，必须对前导数字进行转义。如果确实需要使用数字，请参考CSS escaping rules

【讨论】：

【解决方案4】：

首先，您需要关闭具有类 1 的 div 和第二类。

<div class="1">
  <p></p>
</div>
<div class= "2">
  <p></p>
</div>

试试这个，告诉我你得到了什么:)

你也可以像这样添加css：

div {
  display: inline-block;
}

另一种也许是最好的方法是让第二个 div 向右浮动.. 就像他的：

.2 {
  float: right;
}

【讨论】：

但1不会低于2
@Justinas 是的，我的错.. 我纠正了它:)
或者他可以只使用 flex 或 float 但就像他的代码一样简单.. 我认为他不需要它
因为我使用 wordpress 并安装了一些插件，所以我不知道要编辑哪个文件而不是使用 css .. 顺便说一句，感谢大家的帮助。已经解决了！
如何将div右浮动放到前一个div之上？