小编Key*_*boy的帖子

给定以下代码,我想找到一种方法,让一系列内联块元素拉伸父元素的整个宽度,同时在行换行时堆叠在彼此的顶部.

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

例

如果所有孩子都具有相同的最小宽度,我希望这创建一个网格效果.例如,在较大的屏幕上,孩子们可以叠加5个,直到他们换到第二行.我希望这些都是可用宽度的20%(1/5).当屏幕缩小时,第五个和第十个项目包裹两行4个项目和第三行2个项目.现在我想让孩子们伸展可用宽度的25%(1/4),除了两个孩子的最后一排.那些应该是50%.

尝试

我试过漂浮孩子,让他们成为内联块,我尝试使用flex-box,但他们都没有给我我想要的结果.内联块最接近,允许它们与父宽度收缩一样堆叠,但我无法实现拉伸.

限制

我不想使用媒体查询,因为我需要在此示例的确切断点中编写,然后在站点布局中发生任何更改时更改所有这些.我想找到一种更有机的方法来解决这个问题.

Javascript已经出来了.我想找到一种只使用CSS的方法.