[分享]css划分左右两个区域

CSS是网页设计中不可或缺的一部分，可以使用CSS轻松地将网页分为不同的区域，以更好地组织内容和布局。其中一种常见的以左右两个区域划分的网页布局，可以通过以下代码实现： .container { di...

CSS是网页设计中不可或缺的一部分，可以使用CSS轻松地将网页分为不同的区域，以更好地组织内容和布局。其中一种常见的以左右两个区域划分的网页布局，可以通过以下代码实现：

<style>
  .container {
    display: flex;
  }
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
  }
</style>

<div class="container">
  <div class="left">
    <!-- 在这里插入左边区域的内容 -->
  </div>
  <div class="right">
    <!-- 在这里插入右边区域的内容 -->
  </div>
</div> 

以上代码使用了flex布局，将类名为container的div元素设置为flex容器。由于我们想要将页面分为左右两个区域，因此我们需要将该容器中的元素按水平方向排列。接下来，我们给左右两个区域设置相同的flex值，这样它们的宽度将平均分配。

在实际使用中，您可以将.left和.right的样式进行自定义，以满足您的布局需求。例如，您可以设置它们的背景颜色、文字颜色、字体大小等等。另外，您也可以使用其他CSS布局方式，如float、grid等，来实现左右区域的划分。