我想做一个表格,用for循环
wxml:
<view class="b" wx:for="{{blist}}" >
<view class="bItem">{{item[0]}}</view>
<view class="bItem">{{item[1]}}</view>
<view class="bItem">{{item[2]}}</view>
</view>
wxss:
.b{width:700rpx;height: 100%;background: #87CEFA;display: flex;}
.bItem{border: 1rpx solid black;height: 100%;width: 33.33%;font-size: 35rpx;overflow-wrap: break-word;margin: auto;}
blist:
blist:[
[11111111,22222222,3333333333],
[11111111,22222222,3333333333],
[11111111,22222222,333333333333333],
[11111111,22222222,3333333333],
]
因为不知道会不会换行,所以没法规定父元素的高度,然后两个高度都是100%就没法充满格子了,最后变成这样:
有没有办法能让不自动换行的格子高度跟自动换行的格子保持一致啊?
这个样子?
width: 700rpx;
height: 100%;
background: #87CEFA;
display: flex;
align-items: stretch;
}
.bItem {
border: 1rpx solid black;
width: 33.33%;
font-size: 35rpx;
overflow-wrap: break-word;
}
可以用grid布局。
.b { width: 700rpx; height: 100%; background: #87CEFA; /* display: flex; */ display: grid; grid-template-columns: 33% 33% 33%; } .bItem { border: 1rpx solid black; height: 100%; /* 修改宽度*/ width: 100%; font-size: 35rpx; overflow-wrap: break-word; margin: auto; }
flex布局
社区大佬真多我算是学到了
css设置
align-items: stretch;