[分享]css两列宽度自适应属性

CSS中有一种很常用的技巧，可以让页面中的两列宽度自适应，即左侧列宽度自动调整，右侧列宽度填充父容器的剩余宽度。这种方法使用CSS属性float实现。 要让两列实现自适应宽度，需要将它们包含在一个父容...

CSS中有一种很常用的技巧，可以让页面中的两列宽度自适应，即左侧列宽度自动调整，右侧列宽度填充父容器的剩余宽度。这种方法使用CSS属性float实现。
要让两列实现自适应宽度，需要将它们包含在一个父容器中，并设置父容器的宽度和高度。左侧列使用float:left属性，右侧列使用float:right属性。这样，左侧列就会自动调整宽度，而右侧列会填充父容器的剩余宽度。
下面是一个示例代码：

<div class="container">
  <div class="left">
    <p>左侧列</p>
  </div>
  <div class="right">
    <p>右侧列</p>
  </div>
</div>
<br>
<style>
.container {
  width: 100%;
  height: 300px;
}
.left {
  width: 30%;
  float: left;
}
.right {
  width: 70%;
  float: right;
}
</style> 

在这个示例代码中，父容器的宽度设置为100%，高度设置为300px。左侧列使用了float:left属性，宽度设置为30%。右侧列使用了float:right属性，宽度设置为70%。这样，左侧列的宽度就会自适应，而右侧列会填充父容器的剩余宽度。
总之，使用CSS中的float属性，可以让页面中的两列宽度自适应，这是一个非常有用的技巧，可以让页面更加美观、灵活。