[分享]css两列数据布局 然后只自适应

CSS两列数据布局是Web开发中经常使用的一种布局方式。该布局方式可以实现两列数据（如文本、图像等）在同一行中的呈现。在使用CSS两列布局时，我们还可以设置自适应布局，即当屏幕大小变化时，页面布局也会...

CSS两列数据布局是Web开发中经常使用的一种布局方式。该布局方式可以实现两列数据（如文本、图像等）在同一行中的呈现。在使用CSS两列布局时，我们还可以设置自适应布局，即当屏幕大小变化时，页面布局也会相应地自适应。

// HTML结构示例
<div class="container">
  <div class="left-column">
    // 左侧数据
  </div>
  <div class="right-column">
    // 右侧数据
  </div>
</div> 

在CSS中，我们可以使用float属性来实现两列布局。我们将左列设置为float: left，右列设置为float: right。这样，两列就可以并排显示。

/* CSS样式示例 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.left-column {
  width: 70%;
  float: left;
}

.right-column {
  width: 30%;
  float: right;
} 

上述代码中，我们设置了一个容器，宽度为100%，最大宽度为1200px。左列设置宽度为70%，并向左浮动，右列宽度设置为30%，并向右浮动。最后，我们还设置了容器的overflow属性为hidden，以确保当列高度不同时，容器不会发生意外错位。

但是，使用上述布局方式会存在一个问题：当屏幕尺寸发生变化时，页面布局不会随之自适应。为解决这个问题，我们可以使用CSS3中的flexbox布局方式，来实现自适应布局。

/* 使用flexbox实现自适应布局 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.left-column {
  width: 70%;
}

.right-column {
  width: 30%;
} 

上述代码中，我们仍然设置了一个容器，并设置了最大宽度和居中对齐。但是，在样式中我们将容器的display属性设置为flex，并添加了flex-wrap: wrap属性。这样，如果左列和右列的总宽度大于1200px，则会自动换行，实现自适应布局效果。