如何调整列表元素的大小以适应父宽度

Question

我在维基百科中注意到 https://en.wikipedia.org/wiki/Hercules#Modern_era 有一个未排序列表的画廊，它们总是根据一行中的元素数量调整自己的大小以适应最大宽度。如果您调整浏览器大小 window，您可以看到这一点。图像跳转到新行后，它会重新计算剩余图像的宽度，然后再次填充该行的整个宽度。

我猜这是通过 javascript 或 jquery（而不是 CSS）完成的，但是我不知道有人如何获得当前元素的数量在单行中重新计算本例中每个元素的宽度。

有没有简单的解决方法？

下面是没有调整大小的列表实现：

ul{
  border: 1px solid #000;
  background-color: #eee;
  display: block;
  text-align: center;
  list-style-type: none;
  padding: 0;
}
li{
  padding-left: 0;
  display: inline-block;
  margin: 5px;
  vertical-align: left;
}

.block{
  width: 40px;
  height: 60px;
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
  <li> <div class="block"></div> </li>
</ul>

Answer 1

您需要为此使用网格显示：

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

如何调整列表元素的大小以适应父宽度

How to resize list elements to fit parent width

javascript

jquery