image.png

上線上述布局的實(shí)現(xiàn)方法，屏幕寬度為750rpx，設(shè)置外邊距20rpx，設(shè)置圓角，動態(tài)計(jì)算標(biāo)簽寬度，通過float屬性設(shè)置標(biāo)簽自動浮動布局：
1、創(chuàng)建4個(gè)view標(biāo)簽，
<view class='main'>
<view class='a'>
aaa
</view>
<view class='b'>
aaa
</view>
<view class='c'>
aaa
</view>
<view class='d'>
aaa
</view>
</view>
2、通過float js樣式實(shí)現(xiàn)浮動自動布局
.a{
background: white;
margin: 20rpx;
border-radius: 6px;
width: 710rpx;
height: 200rpx;
float: left;
}
.b{
background: white;
margin: 0rpx 0px 0px 20rpx ;
border-radius: 6px;
width: 345rpx;
height: 300rpx;
float: left;
}
.c{
background: white;
margin: 0rpx 20rpx 20rpx;
border-radius: 6px;
width: 345rpx;
height: 140rpx;
float: left;
}
.d{
background: white;
margin:0rpx 20rpx;
border-radius: 6px;
width: 345rpx;
height: 140rpx;
float: left;
}