[分享]css两排柜子纵向排列

在页面布局时，有时需要将内容分为两列进行排列，这时可以使用CSS的两排柜子纵向排列来实现。下面是一段示例代码： 左边的内容 右边的内容 .container { display: flex;...

在页面布局时，有时需要将内容分为两列进行排列，这时可以使用CSS的两排柜子纵向排列来实现。下面是一段示例代码：

<div class="container">
  <div class="left-column">
    左边的内容
  </div>
  <div class="right-column">
    右边的内容
  </div>
</div>

<style>
  .container {
    display: flex;
  }
  .left-column, .right-column {
    width: 50%;
    box-sizing: border-box;
    padding: 20px;
  }
  .left-column {
    background-color: #eee;
  }
  .right-column {
    background-color: #ccc;
  }
</style> 

以上代码中，使用了CSS的flex布局方式，将两个列的宽度设置为50%，并通过box-sizing和padding属性设置边框盒的大小和内边距。最后通过background-color属性设置不同的背景色来区分两列。

通过以上代码，可以实现两排柜子纵向排列的效果，便于网页的布局和内容的排列。