CSS中我们可以通过设置两个div元素的属性来让它们上下显示。
.container{ display: flex; flex-direction: column; } .div1{ height: 100px; background-color: #f00; } .div2{ height: 200px; background-color: #0f0; }
上述代码中,我们先定义一个父元素.container,它的display属性被设置为flex,表示这是一个弹性容器。flex-direction属性被设置为column,表示主轴为垂直方向,即元素会从上到下排列。
然后定义两个子元素.div1和.div2,它们的高度分别被设置为100px和200px,并设置不同的背景颜色,以便区分。
将以上代码应用到HTML文档中的两个div元素中,则两个div元素就会上下显示。
<div class="container"> <div class="div1"></div> <div class="div2"></div> </div>
以上是CSS让两个div元素上下显示的简单方法。不仅可以通过flex布局实现,还可以使用其他方法,例如float或者position等属性。对于不同的布局需求,我们可以选择不同的方案,创造出更丰富多样的页面布局。