怎么让div中的两个元素上下排列

可以使用 CSS 的 `display` 属性来设置元素的布局方式。常用的有以下两种方法：

1. 使用 `display: flex`：将父元素设为弹性容器，子元素默认为弹性项目，通过设置 `flex-direction: column` 将子元素垂直排列。

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

2. 使用 `display: grid`：将父元素设为网格容器，通过设置 `grid-template-rows` 将子元素按行排列。

.container {
  display: grid;
  grid-template-rows: auto auto;
}

其中，`.container` 为父元素的类名，`auto` 表示子元素自适应高度。你可以根据实际需求来设置子元素的高度。

相关问题

两个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，设置了不同的高度和背景颜色，可以根据需要进行调整。

css如何让两个div上下排列

可以使用CSS中的display属性和float属性来实现两个div上下排列。具体实现方法如下：

1. 设置第一个div的display属性为block，使它变成一个块级元素；
2. 设置第二个div的float属性为left或right，使它浮动在第一个div的下面；
3. 如果需要两个div之间有间隔，可以给第一个div设置margin-bottom属性。

示例代码如下：

<style>
    .box1 {
        display: block;
        background-color: red;
        height: 100px;
        width: 200px;
    }
    .box2 {
        float: left;
        background-color: blue;
        height: 100px;
        width: 200px;
    }
</style>

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

上述代码中，第一个div的class为box1，它的display属性为block；第二个div的class为box2，它的float属性为left。这样就能实现两个div上下排列的效果。