如何用css实现两列布局?

CSS实现两列布局的方法有很多种，以下是几种常用的方法：

1. Flexbox布局

.container {
  display: flex;
}
 
.column1 {
  flex: 1; /* 或者指定flex比例 */
}
 
.column2 {
  flex: 1; /* 或者指定flex比例 */
}

2. Grid布局

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
}

3. 浮动布局

.column1 {
  float: left;
  width: 50%; /* 或者使用其他百分比 */
}
 
.column2 {
  float: right;
  width: 50%; /* 或者使用其他百分比 */
}

4. 使用inline-block

.column1 {
  display: inline-block;
  width: 50%; /* 或者使用其他百分比 */
  vertical-align: top;
}
 
.column2 {
  display: inline-block;
  width: 50%; /* 或者使用其他百分比 */
  vertical-align: top;
}

5. 使用绝对定位

.container {
  position: relative;
}
 
.column1 {
  position: absolute;
  width: 50%; /* 或者使用其他百分比 */
  left: 0;
}
 
.column2 {
  position: absolute;
  width: 50%; /* 或者使用其他百分比 */
  right: 0;
}

选择哪种布局方式取决于具体需求和兼容性要求。在实际开发中，Flexbox和Grid布局因其灵活性和现代浏览器的广泛支持而被广泛使用。