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

要实现这个效果，可以使用CSS3的Flex布局。具体实现如下：

HTML代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 400px; /* 外层div的最大宽度，根据需要自行调整 */
  margin: 0 auto;
}

.item {
  width: calc(33.33% - 10px); /* 层div的宽度，减去margin和border的宽度 */
  height: 100px;
  margin-bottom: 10px;
  background-color: #ccc;
  box-sizing: border-box;
}

@media (max-width: 360px) {
  .item {
    width: calc(50% - 10px);
  }
}

上述代码中，外层div使用`display: flex`将内部的元素排列为 Flex 容器，`flex-wrap: wrap`使得元素在一行排列不下时自动换行，`justify-content: space-between`实现每行元素的间距相等。内部的div元素使用`width: calc(33.33% - 10px)`设置宽度，减去`margin`和`border`的宽度，以适应一行显示三个或四个的需求。同时，使用`max-width`设置外层div的最大宽度，以防止元素过多导致页面过宽，影响用户体验。在移动端，使用媒体查询`@media`调整元素的宽度，以适应不同尺寸的屏幕。