微信小程序，每行显示四列，每行显示三列，每行显示两列

最新推荐文章于 2022-12-06 23:37:35 发布

原克技术

最新推荐文章于 2022-12-06 23:37:35 发布

阅读量5.2k

点赞数 7

分类专栏：微信小程序文章标签：小程序微信小程序微信小程序每行显示两列微信小程序每行显示三列微信小程序每行显示四列

本文链接：https://blog.csdn.net/weixin_44432032/article/details/113093787

版权

微信小程序专栏收录该内容

11 篇文章

订阅专栏

这是一个关于移动端界面设计的示例，使用HTML和CSS展示了多个列表项的布局。每个列表项包含一个图片和文本，如品牌大全、新品上架等。CSS部分定义了容器的显示方式为flex，并设置了列表项的宽度和对齐方式，使得内容可以适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

<view class="con_list">
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">品牌大全</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">新品上架</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">用户中心</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">订单列表</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">留言反馈</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">活动列表</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">帮助中心</view>
  </view>
  <view class="list">
    <view class="img_list">
      <image src="/img/e.png"></image>
    </view>
      <view class="txt_list">关于我们</view>
  </view>
</view>

2.css

.con_list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.con_list .list{
  width: 25%;  /*width:50%;每行显示两列，width:33.3%;每行显示三列*/
  height: auto;
  text-align: center;
  margin-top: 40rpx;
}