怎么使得两个div上下排列

可以使用CSS中的display属性和定位来实现。将父元素设置为position:relative;，子元素设置为position:absolute;，并使用top、bottom、left、right属性来控制子元素的位置。具体实现可参考以下代码：

HTML代码：

<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>

CSS代码：

.wrapper {
position: relative;
width: 100%;
height: 300px;
}

.box1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
background: #ccc;
}

.box2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: #eee;
}

相关问题

最简单的方法使得两个div上下排列？

可以使用CSS中的flex布局，将两个div都放在一个父元素中，并设置父元素的display属性为flex，以及flex-direction属性为column即可实现两个div上下排列。

例如：

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

.child1,
.child2 {
  width: 100px;
  height: 50px;
}

.child1 {
  background-color: red;
}

.child2 {
  background-color: blue;
}

<div class="parent">
  <div class="child1">上面的div</div>
  <div class="child2">下面的div</div>
</div>

这样，child1和child2会分别在父元素的顶部和底部排列。

两个div上下排列

可以使用CSS中的flexbox布局来实现两个div上下排列。代码如下：

HTML代码：

<div class="container">
  <div class="box1">上面的div</div>
  <div class="box2">下面的div</div>
</div>

CSS代码：

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

.box1 {
  background-color: #FFC0CB;
  height: 100px;
}

.box2 {
  background-color: #ADD8E6;
  height: 200px;
}

以上代码中，`.container`为包含两个div的容器，设置了`display: flex`和`flex-direction: column`，表示容器内的元素按照垂直方向排列。`.box1`和`.box2`分别为两个div，设置了不同的高度和背景颜色，可以根据需要进行调整。