微信小程序列表div宽度设置100px 自适应一行显示三个或四个如何设置外层div的宽度width代码

你可以使用 CSS3 的 Flexbox 布局来实现这个需求，具体的做法是：

1. 声明一个外层 div，设置它的 display 属性为 flex，这样它的子元素就可以使用 Flexbox 布局了。
2. 设置子元素的宽度为 100px。
3. 使用 flex-wrap 属性设置子元素的换行方式，可以设置为 wrap 或 wrap-reverse。
4. 根据子元素的数量来计算外层 div 的宽度，例如，如果一行要显示四个子元素，那么外层 div 的宽度应该是 4*100px=400px。

示例代码如下：

HTML 代码：

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
</div>

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
  /* 根据子元素数量计算外层 div 的宽度 */
  width: 400px;
}

.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-sizing: border-box;
}

这样，如果一行可以显示四个子元素，那么就会在一行显示四个，如果只能显示三个，那么就会在两行显示。