cover-view的css问题（flex）
发布于 5 年前 作者 songyong 15928 次浏览 来自 问答

即便去掉cover-view本身的换行样式也不行

求解。

(发帖的标签应该包含所有组件名吧，找都找不到)

9 回复

想要的效果是会换行的，大概一行3个。

cover-view 他不换行；

如果换成  view  标签就是我要的效果，当然这只能工具上显示。

你好，麻烦提供下完整的代码示例

我想要效果是这种

这效果仅仅是把 cover-view 换成 view 标签

不是平台问题，我在想是不是这个组件cover-view与flex不兼容

还有在什么平台上有问题？

@黄思程  怎样？

cover-view默认有white-space:nowrap

正常是想要怎样的效果

wxml (map组件里面)

<cover-view class="users" wx:if='{{debug}}'>
  <cover-view class='users-title'>请选择你的她</cover-view>
  <cover-view class="user-list">
    <cover-view class="user-item">
      <cover-image class='img' src='http://qnimg.pianke.me/5fb30002fce3d35b415f715dda88344820171011.jpg?imageView2/2/w/300/format/jpg'></cover-image>
      <cover-view>无敌是多么寂寞</cover-view>
    </cover-view>
    <cover-view class="user-item">
      <cover-image class='img' src='http://qnimg.pianke.me/5fb30002fce3d35b415f715dda88344820171011.jpg?imageView2/2/w/300/format/jpg'></cover-image>
      <cover-view>无敌是多么寂寞</cover-view>
    </cover-view>
    <cover-view class="user-item">
      <cover-image class='img' src='http://qnimg.pianke.me/5fb30002fce3d35b415f715dda88344820171011.jpg?imageView2/2/w/300/format/jpg'></cover-image>
      <cover-view>无敌是多么寂寞</cover-view>
    </cover-view>
    //...省略多个
  </cover-view>
</cover-view>

wxss

.users{
  width: 70%;
  height: 300rpx;
  background-color: rgba(136,136,136,0.7);
  position: absolute;
  left: 15%;
  top:30%;
  font-size: 25rpx;
}
 
.users-title{
  width: 100%;
  color: white;
  margin: 6rpx 0;
  text-align: center;
}
 
.user-list{
  width: 100%;
  margin: 6rpx;
  display: flex;
  flex-wrap: wrap;
}
 
.user-item{
  width: 30%;
  color: white;
}

效果是这样的：

回到顶部