CSS上下拼接两个div .container { display: flex; flex-wrap: wrap; } .box { width: 50%; height: 200px; } .box
在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已经成功上下拼接啦!
粉丝
0
关注
0
收藏
0