如何将一个元素放置在另一个元素下方？

Question

我想将一个元素放在另一个元素下。我在 CSS 中使用

position: absolute

。

 .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}

    <div class="first"></div>
    <div class="second"></div>

我希望蓝色框位于红色框下方。我怎样才能实现这个目标？

Answer 1

只需将

position : relative

给第二个

div

和

top:315px

或任何你想要的

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
    position: relative;
    top: 315px;
}

<html>
<head>

</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</head>

Answer 2

解决方案如下：

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
     box-sizing: border-box;
}
.second{
    position: relative;
    border:2px solid blue;
    width:40%;
    height:200px;
    top: 300px;
    box-sizing: border-box;
}

<div class="first"></div>
    <div class="second"></div>

并且你可以不点

position

，因为

div

是块元素，默认会放置在新行。

.first{
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}

<div class="first"></div>
<div class="second"></div>

Answer 3

尝试使用

clear: both;

。

clear属性指定浮动元素不允许在元素的哪一侧浮动。

https://www.w3schools.com/cssref/pr_class_clear.asp

Answer 4

将一个 div 置于另一个 div 下的一种方法是将第二个 div 放在第一个 div 内，并使用

position

和

top: 100%;

设置第二个 div 的样式。第一个 div 应该有

position: absolute;

position: relative;

.first{
     width:70%;
     height:300px;
     position: relative;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:100%;
    height: 200px;
    position: absolute;
    top: 100%;
    left: 0;
}

Answer 5

<html>
<head>

</head>
<body>
<div class="first">
  <div class="second"></div>
</div>

</body>
</head>

 .first{
     display: block;
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    display: block;
    border:2px solid blue;
    width:40%;
    height:200px;
}

Answer 6

<div class="first"></div>

<div class="second"></div>

。快乐编码:)。

如何将一个元素放置在另一个元素下方？

问题描述投票：0回答：6

6个回答

最新问题

如何将一个元素放置在另一个元素下方？

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6