两栏布局(图2)更加常用和简便的两种写法:
(图1)
(图2)
写法一:
<view class="outBox">
<view class="left">1111</view>
<view class="right">222</view>
</view>
<style lang="scss">
.outBox{
height: 200px;
.left{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.right{
height: 200px;
background-color: yellowgreen;
//没加如图1,加了如图2
overflow: hidden;
}
}
</style>
写法二:
<view class="outBox">
<view class="left">1111</view>
<view class="right">222</view>
</view>
<style lang="scss">
.outBox{
height: 200px;
display: flex;
.left{
width: 100px;
height: 100px;
background: pink;
}
.right{
height: 200px;
background-color: yellowgreen;
flex: 1;
}
}
</style>