假设高度已知，请写出三栏布局，左栏、右栏宽度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
