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;
}

相关问题

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上下排列了。

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