[分享]css两列自适应高度

在网页设计中，往往需要实现两列布局，而且这两列需要自适应高度。如何实现呢？这里我们来介绍一种基于CSS的实现方法。 ...内容... ...内容... 首先，在HTML中定义两个div，分...

在网页设计中，往往需要实现两列布局，而且这两列需要自适应高度。如何实现呢？

这里我们来介绍一种基于CSS的实现方法。

 <div class="container">
    <div class="column1">
      ...内容...
    </div>

    <div class="column2">
      ...内容...
    </div>
  </div> 

首先，在HTML中定义两个div，分别实现两列的内容布局。其中，container作为整个布局的容器，column1和column2则是我们需要自适应高度的两列。

 .container {
    display: flex;  /* 使用flex布局 */
    flex-wrap: wrap;  /* 允许换行 */
    align-items: stretch;  /* 子元素高度自适应父元素 */
  }

  .column1 {
    flex: 1;  /* 列1占1份 */
    background-color: #f2f2f2;
  }

  .column2 {
    flex: 1;  /* 列2占1份 */
    background-color: #e6e6e6;
  } 

接下来，在CSS中设置.container的相关属性。我们使用了flex布局，并且设置了允许换行和子元素高度自适应父元素的属性。而在.column1和.column2中，我们设置了它们各占布局一半的地位，并设置了不同的背景色。

这样，我们就完成了两列自适应高度的布局。