收藏
回答

如何保持一个view中其他几个view的高度一致?

我想做一个表格,用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;height100%;background#87CEFA;display: flex;}
.bItem{border1rpx solid black;height100%;width33.33%;font-size35rpx;overflow-wrap: break-word;margin: auto;}

blist:

    blist:[
      [11111111,22222222,3333333333],
      [11111111,22222222,3333333333],
      [11111111,22222222,333333333333333],
      [11111111,22222222,3333333333],
          ]


因为不知道会不会换行,所以没法规定父元素的高度,然后两个高度都是100%就没法充满格子了,最后变成这样:

有没有办法能让不自动换行的格子高度跟自动换行的格子保持一致啊?

回答关注问题邀请回答
收藏

5 个回答

  • 凌晨丶傍晚
    凌晨丶傍晚
    2021-11-03

    这个样子?

    2021-11-03
    有用 1
    回复 5
    • Bepo
      Bepo
      2021-11-03
      是的,就要这个样子的,我生成的那个样子太丑了
      2021-11-03
      回复
    • 凌晨丶傍晚
      凌晨丶傍晚
      2021-11-03回复Bepo
      .b {
        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;
      }
      2021-11-03
      回复
    • Bepo
      Bepo
      2021-11-03回复凌晨丶傍晚
      非常感谢,原来要把子元素的高度100%去掉才行
      2021-11-03
      回复
    • 凌晨丶傍晚
      凌晨丶傍晚
      2021-11-03回复Bepo
      你想让他自适应,就别设高度
      2021-11-03
      回复
    • Bepo
      Bepo
      2021-11-03回复凌晨丶傍晚
      明白,多谢指点
      2021-11-03
      回复
  • 困难
    困难
    2021-11-03

    可以用grid布局。

    .b {
      width700rpx;
      height100%;
      background#87CEFA;
      /* display: flex; */
      display: grid;
      grid-template-columns33% 33% 33%;
    }
    .bItem {
      border1rpx solid black;
      height100%;
        /* 修改宽度*/
      width100%;
      font-size35rpx;
      overflow-wrap: break-word;
      margin: auto;
    }
    
    2021-11-03
    有用 1
    回复 1
    • Bepo
      Bepo
      2021-11-03
      非常感谢
      2021-11-03
      回复
  • 神经蛙
    神经蛙
    2021-11-03

    flex布局

    2021-11-03
    有用 2
    回复
  • 谋谋谋
    谋谋谋
    2021-11-04

    社区大佬真多我算是学到了

    2021-11-04
    有用
    回复
  • 微喵网络
    微喵网络
    2021-11-03

    css设置

    align-items: stretch;
    
    2021-11-03
    有用
    回复 4
登录 后发表内容