css 两个div上下显示

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等属性。对于不同的布局需求，我们可以选择不同的方案，创造出更丰富多样的页面布局。