[分享]css两个div如何竖着

发布于 2024-11-11 19:09:30

CSS是一种用于网页设计的语言，可以实现各种各样的样式效果。其中，两个如何竖着排列是一个常见的需求。下面是一个示例代码：红色的蓝色的 .wrapper { display: flex; fle...

CSS是一种用于网页设计的语言，可以实现各种各样的样式效果。其中，两个

如何竖着排列是一个常见的需求。

下面是一个示例代码：

 <div class="wrapper">
    <div class="red">红色的</div>
    <div class="blue">蓝色的</div>
  </div>
  
  <style>
    .wrapper {
      display: flex;
      flex-direction: column;
    }
    
    .red {
      background-color: red;
      height: 100px;
    }
    
    .blue {
      background-color: blue;
      height: 100px;
    }
  </style>

上面的代码中，两个

都被嵌套在一个有class="wrapper"的

中。使用CSS的Flex布局，设置.wrapper的flex-direction为column，即可实现两个

竖着排列。

其中，.red和.blue分别用来设置两个

的样式。在本示例中，设置了它们的高度为100px，背景颜色分别为红色和蓝色。

以上代码执行后，会得到一个红色和蓝色的垂直排列的效果。

css 教程