如何创建一个响应式用户列表，可以在窗口拉伸和压缩时进行调整，选择带有复选框的用户？

Question

：

：

这是当前输出，其中包含用户个人资料图片、姓名和电子邮件的 div 与它们后面的 div 重叠。

（这是一个要集成到项目中的虚拟代码）

这是代码：

body {
  font-size: 16px;
  line-height: 1.5;
  background: #f5f5f5;
}

.wrapper {
  margin: 100px auto;
  max-width: 1160px;
  display: grid;
  grid-template-columns: repeat(5, 150px);
  gap: 1rem;
  column-gap: 10px;
  border: 5px solid purple;
}

.wrapper>.container {
  min-width: 200px;
  display: flex;
  border: 1px solid skyblue;
  background: #fff;
  margin: 20px;
  padding: .5rem;
}

.Profile_image>img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 10px;
  border: plum solid;
}

.label {
  padding-top: 10px;
  padding-right: 10px;
  line-height: 1.8rem;
}

.checkBoxContainer {
  top: 50%;
  height: max-content;
  align-self: center;
}

<div class="wrapper">

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer">
      <input type="checkbox" id="uid">
    </div>
    <div class="Profile_image">
      <img src="/sub/Male.png" alt="">
    </div>
    <div class="label">
      <h3>Troy</h1>
        <p class="email">[email protected]</p>
    </div>
  </div>

</div>

问题：

我有一个 max-widht:1160px 的块（包装器），我希望将所有用户依次放置在其中，如果用户数量超过空间，则剩余的用户应在下一行继续，如果窗口大小缩小，则列表应调整为窗口长度并形成单列，其中用户 div 最小为 200 像素，如果窗口最大化，则行中的用户数量应填满 1160 像素空间。

Answer 1

一种方法如下，代码中带有解释性注释：

/*
    used to remove default margins and padding, to ensure that spacing
    is consistent across browsers, and across the document; we also
    set box-sizing to use the border-box algorithm which includes any
    margins, and border-widths, in the assigned element-sizing:
*/
*,::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  line-height: 1.5;
  background: #f5f5f5;
}

.wrapper {
  margin: 100px auto;
  /*
    max-width: 1160px;
    I removed this declaration because while it set a max-width,
    it didn't set any other size constraints, whereas setting the
    width using the CSS clamp() function, allows us to set a minimum,
    preferred, and maximum size:
      width: clamp(<minimum size>, <preferred size>, <maximum size>);
    below, if the 90% of the parent element is less than 300px the
    element will take 300px in width; otherwise if 90% is greater than
    1160px the element will remain at 1160px; otherwise it will always
    occupy 90% of its parent's width:
  */   
  width: clamp(300px, 90%, 1160px);
  display: grid;
  /*
    this causes each new row of elements to occupy one fraction of
    the available space:
  */
  grid-auto-rows: 1fr;
  /*
    this was removed because while it set 5 columns those columns had
    no flexibility in sizing, and was always 5 columns regardless of
    available size:
      grid-template-columns: repeat(5, 150px);
    I replaced it with the following line; here we're still using the
    repeat() function, but the second argument is changed to use the
    minmax() function, this defines a size range greater than or equal
    to <min> and less than or equal to <max>:
      minmax(<min>, <max>);
    below this means that the columns will be at least 200px in size,
    and one fraction of the available space:
  */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /*
    I combined these two functions together for simplicity, and
    for easier maintenance in future (if both values are in the
    same place, future you is more likely to see them both and
    adjust as necessary; I know they were on adjacent lines, but
    code has a habit of being changed unexpectedly):
      gap: 1rem;
      column-gap: 10px;
  */
  gap: 1rem 10px;
  border: 5px solid purple;
  /*
    I added this rule to give some space between the borders of the parent,
    and the child elements; I also copied the values for the gap property
    in order to maintain the visual spacing between columns and rows:
  */
  padding: 1rem 10px;
}

.wrapper > .container {
  /*
    setting the width here doesn't affect the track size,
    so it's easier to let the parent element's
    grid-template-columns() rule address the sizing
    (unless you specifically want the element to be smaller
    than the track size, which would be unusual):
      min-width: 200px;
  */
  display: flex;
  /*
    again, leave the sizing to the parent's grid-template-columns
    rule:
      width: 20%;
  */
  border: 1px solid skyblue;
  background: #fff;
  /*
    as above, let the parent handle the gaps between grid-items;
    that's precisely what the gap property is for: 
      margin: 20px;
  */
  padding: 0.5rem;
}

.Profile_image > img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 10px;
  border: plum solid;
}

.label {
  padding-top: 10px;
  padding-right: 10px;
  line-height: 1.8rem;
}

.checkBoxContainer {
  top: 50%;
  height: max-content;
  align-self: center;
}

<div class="wrapper">

  <!--
    <div class="container">
      <div class="checkBoxContainer">
        you had repeated ids in your code, because you obviously created
        one generic/anonymous example; but even in generic code repeated
        ids are invalid (though that leads to JavaScript errors, and if
        you use <label> elements with the "for" attribute that would
        also create problems):
        <input type="checkbox" id="uid">
      </div>
      <div class="Profile_image">
        <img src="/sub/Male.png" alt="">
      </div>
      <div class="label">
        <h3>Troy</h1>
          <p class="email">[email protected]</p>
      </div>
    </div>
  -->

  <!-- other than some layout differences, the HTML remains the same, with
       the exception of the changed ids, uid_1 through uid_7: -->
  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_1"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_2"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_3"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_4"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_5"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_6"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

  <div class="container">
    <div class="checkBoxContainer"><input type="checkbox" id="uid_7"></div>
    <div class="Profile_image"><img src="//picsum.photos/80/80" alt=""></div>
    <div class="label">
      <h3>Troy</h3>
      <p class="email">[email protected]</p>
    </div>
  </div>

</div>

JS Fiddle 演示.

参考资料：

• align-self

  。

• auto-fit

  。

• background

  。

• border

  。

• border-radius

  。

• box-sizing

  。

• clamp

  。

• column-gap

  。

• display

  。

• font-size

  。

• gap

  。

• grid-auto-rows

  。

• grid-template-columns

  。

• height

  。

• line-height

  。

• margin

  。

• max-content

  。

• max-width

  。

• minmax()

  。

• min-width

  。

• padding

  。

• padding-right

  。

• padding-top

  。

• repeat()

  。

• top

  。

• width

  。