Question

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

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

先谢谢了。

Answer 1

首先，您的元素未正确关闭。因此，假设您使用以下代码对其进行了修复：

<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>

Answer 2

您可以使用弹性订单。您必须添加一个容器或使用当前的包含元素，并为其提供一个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>

Answer 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

Answer 4

首先，您需要关闭第1类的div，第二个也需要关闭。

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

尝试一下，告诉我您得到了什么：）

您还可以这样添加CSS：

div {
  display: inline-block;
}

另一种也许也是最好的方法是使第二个div像他一样浮动：

.2 {
  float: right;
}

如何使用CSS使div 1出现在div 2中

4 个答案: