小程序: 三栏布局的五种实现方式及优缺点

假设高度已知，请写出三栏布局，左栏、右栏宽度100rpx，中间宽度自适应。 间隔10rpx

浮动布局

wxml:
<view class='content2'>
  <view class='left2'>left</view>
  <view class='right2'>right</view>
  <view class='center2'>浮动 布局解决方案</view>
</view>

wxss:
.content2 .left2, .right2{
  width: 130rpx;
  height: 200rpx; 
}
.content2 .left2{
  float: left;
}
.content2 .right2{
  float: right;
}
.content2 .center2 {
  height: 200rpx;
  margin: 0 140rpx;
}

浮动布局的优点就是比较简单，兼容性也比较好。
缺点是浮动元素是脱离文档流，要做清除浮动，否则可能会出现高度塌陷等问题。

flex box布局

wxml:
<view class='content1'>
  <view class='left1'>left</view>
  <view class='center1'>flexBox 布局解决方案</view>
  <view class='right1'>right</view>
</view>

wxss:
.content1 {
  display: flex;
}
.content1 .left1, .right1 {
  width: 100rpx;
  height: 200rpx;
}
.content1 .center1{
  flex: 1;
  margin: 0 10rpx;
}

绝对定位布局

wxml:
<view class='content3'>
  <view class='left3'>left</view>
  <view class='center3'>绝对定位布局解决方案</view>
  <view class='right3'>right</view>
</view>

wxss:
.content3 {
  width: 100%;
  position: absolute;
}
.content3 .left3, .right3 {
  width: 130rpx;
  height: 200rpx;
  position: absolute;
}
.content3 .left3 {
  left: 0;
}
.content3 .right3 {
  right: 0;
}
.content3 .center3 {
  left: 140rpx;
  right: 140rpx;
  position: absolute;
  height: 200rpx; 
}

绝对定位布局优点: 很快捷，设置很方便.
但是脱离文档流的, 可能会造成重叠元素

表格布局

wxml:
<view class='content4'>
  <view class='left4'>left</view>
  <view class='center4'>表格布局解决方案</view>
  <view class='right4'>right</view>
</view>

wxss:
.content4 {
  width: 100%;
  height: 200rpx;  
  display: table;
}
.content4 .left4, .right4 {
  width: 130rpx;
  background: red;
  display: table-cell;
}

.content4 .center4 {
  display: table-cell;
  background: #5BBC10;
}

在flex布局不兼容的时候，可以尝试表格布局。

网格布局

wxml:
<view class='content5'>
  <view class='left5'>left</view>
  <view class='center5'>网格布局解决方案</view>
  <view class='right5'>right</view>
</view>

wxss:
.content5 {
  width: 100%;
  background: white;
  margin: 20rpx 0 20rpx;
  text-align: center;

  display: grid;
  grid-template-rows: 200rpx;
  grid-template-columns: 130rpx auto 130rpx;
}
.content5 .left5, .right5 {
  background: red;
}
.content5 .center5 {
  background: #5BBC10;
  margin: 0 10rpx;
}

image.png

CSS基础（float属性与清除浮动）
三栏布局的5种解决方案及优缺点