目的:
代码:
<!--pages/index/index.wxml--> <view class="container"> <view class="top"> <text class="top_left">1</text> <view class="top_right"> <text class="top_right_high">2</text> <text class="top_right_low">3</text> </view> </view> <view class="buttom"> <view class="buttom_left"> <text class="buttom_left_high">4</text> <text class="buttom_left_low">5</text> </view> <view class="buttom_right"> <text class="buttom_right_high">6</text> <text class="buttom_right_low">7</text> </view> </view> </view>
/* pages/index/index.wxss */ /* 全局 */ .container{ display: flex; flex-direction: column; } /* 上半部 */ .top{ height: 50vh; display: flex; flex-direction: row; } .top_right{ display: flex; flex-direction: column; } .top_left{ height: 600rpx; 375rpx; background-color: red; } .top_right_high{ height: 300rpx; 375rpx; background-color: gold; } .top_right_low{ height: 300rpx; 375rpx; background-color: blue; } /* 下半部 */ .buttom{ height: 50vh; display: flex; flex-direction: row; } .buttom_right{ display: flex; flex-direction: column; } .buttom_left{ display: flex; flex-direction: column; } .buttom_right_high{ height: 300rpx; 375rpx; background-color: lightcoral; } .buttom_right_low{ height: 300rpx; 375rpx; background-color: hotpink; } .buttom_left_high{ height: 300rpx; 375rpx; background-color: aqua; } .buttom_left_low{ height: 300rpx; 375rpx; background-color: green; }