Question

img {
  height: 50px;
}

<div>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    </div>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    </div>
</div>

如您所见，我设法将图像分为两行，这需要将它们放入两个两个div中。现在，这些项目是动态生成的，并且其数量尚不清楚。显然，编写将这些项目正确排列到这两个div中的JS并不难，但是，我很感兴趣是否可以避免这种情况？

就是说，我很感兴趣是否可以编写将所有项目排列成均匀大小的行的CSS（例如，一行中的4个项目，另一行中的4个，而不是一行中的6个，另一行中的2个））而不使用中间div？这样，所有img只会是最外面div的直接子代，并且一旦其编号更改（添加了一些，删除了一些），它们将正确地重新排列自己，而无需任何额外的JS代码来重新排列它们div还是要更改第n/2个img的类或内联样式？

编辑：就像我的代码片段一样，我希望图像仅占据必要的水平空间，并且不拉伸到封闭容器的整个宽度。这实际上是必需的。

Answer 1

您可以使用伪元素创建中断：

.container>span:nth-child(3n):after {
  content: "\A";
  display: block;
}

img {
  height: 50px;
}

<div class="container">
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
  <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" /></span>
</div>

如果要在一行上显示4，则可以使用4n

Answer 2

使用CSS grid，您可以：

div{
  display: grid;
  grid-template-columns: repeat(3, 50px);
}
img {
  width: 100%; /* as the column width */
}

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

Answer 3

该解决方案似乎最符合我的需要：（这是Roko C. Buljan解决方案的稍作修改，因此，很多功劳归功于他☺）

div{
  display: inline-grid;
  grid-template-columns: repeat(3, max-content); 
}
img {
  width: 50px;
}
img:nth-of-type(2) {
  width: 100px;
}

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

这样，整个网格容器的宽度将不会超过所需宽度，并且一个较大的元素将不会拧紧布局。虽然grid-template-columns必须从JS设置（因为它取决于我们有多少个元素），但是我想这是不可避免的，真的是☹）

是否可以在不使用中间div的情况下将项目分为两行？

3 个答案: