小程序
小游戏
企业微信
微信支付
扫描小程序码分享
需求：
写了一个信息展示卡片，希望一行展示两个，于是在自定义的卡片组件的wxss文件中设置容器的container的with为44%，但是显示在页面后，该组件的宽度仍然充满了整行，希望知道怎么去改变该组件的宽
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<d-good-card-ver class="good-list" good="{{item}}”/>
设置成inline-block
.good-list { display: inline-block; }
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
解决的方式有很多种，按照你的思路，最简单的就是直接在你的组件d-good-card-ver组件使用的时候加个样式width：46%，而不要在组件中的container加width：46%。因为页面是无法影响组件内部代码的宽度计算的。
.wxml
<view class="good-list-ver" hidden="{{!isChange}}"> <block wx:for="{igoodList}}” wx:key="title"> <d-good-card-ver class="good-list" good="{{item}}”/> </block> </view>
.wxss
.good-list{ width: 46% }
代码片段：https://developers.weixin.qq.com/s/32k06xmx7PpE
效果图
注意的点：image 有默认的样式，需要给其设置宽度
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<d-good-card-ver class="good-list" good="{{item}}”/>设置成inline-block
.good-list { display: inline-block; }解决的方式有很多种，按照你的思路，最简单的就是直接在你的组件d-good-card-ver组件使用的时候加个样式width：46%，而不要在组件中的container加width：46%。因为页面是无法影响组件内部代码的宽度计算的。
.wxml
<view class="good-list-ver" hidden="{{!isChange}}"> <block wx:for="{igoodList}}” wx:key="title"> <d-good-card-ver class="good-list" good="{{item}}”/> </block> </view>.wxss
.good-list{ width: 46% }代码片段：https://developers.weixin.qq.com/s/32k06xmx7PpE
效果图
注意的点：image 有默认的样式，需要给其设置宽度