怎么让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上下排列

要让两个div上下排列，可以使用CSS中的`display`属性和`float`属性。具体方法如下：

1. 为两个div添加样式，设置宽度和高度，并使用`float`属性将它们浮动到左侧或右侧，例如：

div {
  width: 50%;
  height: 100px;
  float: left; /* 或者 float: right; */
}

2. 在父元素中添加`clear`属性，以防止子元素浮动影响布局，例如：

.parent {
  clear: both;
}

3. 确保两个div的高度相加不超过父元素的高度，否则会出现布局问题。

完整的代码示例：

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

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

.parent {
  clear: both;
}