css让两个div上下排列

可以使用CSS的flexbox布局或者grid布局来实现两个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上下排列了。

相关问题

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上下排列的效果。

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