[分享]css不等比例两栏

在网页设计中，经常会使用到两栏布局。可以使用CSS实现不等比例两栏布局。下面是一个简单的示例：

  <div class="container">
       <div class="left">Left Column</div>
       <div class="right">Right Column</div>
    </div>
    <style>
      .container {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
      }

      .left {
        flex-basis: 30%;
        background-color: #f2f2f2;
      }

      .right {
        flex-basis: 70%;
        background-color: #d9d9d9;
      }
   </style> 

在上面的代码中，我们使用了CSS的Flexbox布局。通过设置容器的display属性为flex，可以使得左右两栏布局并排显示。然后设置容器的flex-direction属性为row，表示左右两栏是同一行左右排列。注意，因为容器的默认对齐方式为居中对齐，所以我们还需要设置容器的justify-content属性为flex-start，让左边的栏目靠左对齐。

接下来，我们分别设置左右两栏的宽度。这里使用了flex-basis属性，表示左边栏目占据整个容器的30%，右边栏目占据剩下的70%。并且给左边栏目和右边栏目分别设置了背景颜色，以便说明效果。

我们可以通过修改flex-basis属性的值来达到不同的布局效果。比如，将左边栏目的flex-basis属性的值调整为20%，右边栏目的flex-basis属性的值调整为80%，就可以实现不等比例的两栏布局。

以上就是使用CSS实现不等比例两栏布局的基本方法。希望对您有所帮助。