CSS上下拼接两个div .container { display: flex; flex-wrap: wrap; } .box { width: 50%; height: 200px; } .box1 { background-color: red; } .box2 { background-color: blue; }

CSS上下拼接两个div

在CSS中，我们可以使用Flexbox布局来实现两个div上下拼接的效果。

首先，我们需要创建一个容器，用来包含两个div。我们给这个容器设置display:flex和flex-wrap:wrap两个属性，表示容器内的元素按照flex布局排列，如果空间不足则换行。

 .container {
    display: flex;
    flex-wrap: wrap;
}  

然后，我们在这个容器内创建两个div，分别设置宽度为50%（也就是占用一行的一半），高度为200px，并且分别设置不同的背景颜色。

 .box {
    width: 50%;
    height: 200px;
}
.box1 {
    background-color: red;
}
.box2 {
    background-color: blue;
}  

最后，我们就可以在HTML中创建一个容器，并在其中分别放置两个div。打开浏览器，你会发现这两个div已经成功上下拼接啦！