html两个div上下排列

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

HTML代码：

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.top {
  flex: 1; /* 设置上面的div占据剩余空间 */
  background-color: red;
}

.bottom {
  height: 100px; /* 设置下面的div高度为100px */
  background-color: blue;
}

这样，上面的div会占据剩余的空间，下面的div则固定为100px高度，从而实现上下排列的效果。

相关问题

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

怎么设置两个div上下排列

可以使用CSS中的flexbox布局来实现两个div上下排列。以下是一个简单的例子：

HTML代码：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

CSS代码：

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

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

.box2 {
  background-color: blue;
  height: 100px;
}

在上述代码中，我们首先定义了一个包含两个div的.container元素，并将其display属性设置为flex。接着，我们使用flex-direction属性将其子元素的排列方向设置为列（column），这样两个div就会上下排列了。

.box1和.box2分别代表两个div元素，我们通过设置它们的背景颜色和高度使它们看起来更加明显。