uniapp 2列布局

两列布局实现方法

在UniApp中实现两列布局，可以通过多种方式完成。以下是几种常见的方法：

flex布局方式

<view class="container">
  <view class="left-column">左侧内容</view>
  <view class="right-column">右侧内容</view>
</view>

.container {
  display: flex;
  flex-direction: row;
}
.left-column, .right-column {
  flex: 1;
}

grid布局方式

<view class="grid-container">
  <view class="grid-item">第一列</view>
  <view class="grid-item">第二列</view>
</view>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

float浮动方式

<view class="float-container">
  <view class="float-left">浮动左侧</view>
  <view class="float-right">浮动右侧</view>
  <view class="clearfix"></view>
</view>

.float-left {
  float: left;
  width: 50%;
}
.float-right {
  float: right;
  width: 50%;
}
.clearfix {
  clear: both;
}

响应式处理

为适应不同屏幕尺寸，可以添加媒体查询：

@media screen and (max-width: 750px) {
  .container {
    flex-direction: column;
  }
  .left-column, .right-column {
    width: 100%;
  }
}

间距和边距调整

在两列之间添加间距：

.container {
  gap: 15px;
}
.left-column {
  margin-right: 7.5px;
}
.right-column {
  margin-left: 7.5px;
}

注意事项

• 使用flex布局时注意兼容性问题
• 在小程序环境中，某些CSS属性可能需要加前缀
• 考虑使用rpx单位实现更好的适配效果
• 避免使用百分比宽度时出现计算误差

以上方法可根据具体项目需求选择使用，flex布局是目前最推荐的方式，具有较好的兼容性和灵活性。