Css 均匀分布的一行图像

我想要一排均匀分布且合理的图像，经过一些研究，我发现了这种优雅的方法：

#container {
  text-align: justify;
  background-color: #FF0000;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
}

<div id="container">
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/100x150" />
  <img src="http://placehold.it/250x50" />
  <img src="http://placehold.it/150x150" />
</div>

#容器{
文本对齐：对齐；
背景色：#FF0000；
}
#集装箱img{
显示：内联块；
}
#容器：之后{
内容：“；
宽度：100%；
显示：内联块；
}

请参见此处的结果：

为什么右边有这么小的边距？

---

如何删除图像下方添加的空白？

您可以通过对CSS进行以下调整来删除底部空白：

#container {
  text-align: justify;
  background-color: #FF0000;
  line-height: 0;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

从伪元素（空字符串）生成的内容创建一个内联框，其高度等于包含块的行高度（本例中为容器）

通过设置

行高度：0

，这将强制所有内联框收缩到零高度

脚注 在Chrome（和类似的webkit浏览器）中，您会在最右边的元素的右边看到一些额外的空间。这个额外的空间在Firefox中是看不到的（我在Firefox中测试了代码）

额外的空间是原始HTML标记中空白的结果。最右边的元素在结束标记

之前有一个空格字符（CR/LF），生成的内容放在空格之后，在某些浏览器中显示

您可以通过如下修改HTML来消除它：

<div id="container">
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/100x150" />
  <img src="http://placehold.it/250x50" />
  <img src="http://placehold.it/150x150" /></div>

---

也就是说，将结束标记保持在最后的

img

标记旁边。

另一种不存在空白和填充问题的方法是：

---

并将

添加到div的末尾

如果在#container:的content属性之后放置一些文本，您将注意到它的作用

#container {
  text-align: justify;
  background-color: #FF0000;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "This is some text";
    width: 100%;
    display: inline-block;
}

查看此链接了解更多详细信息#容器：after在加载容器中的所有其他内容后添加内容

---

解决问题的一个方法是将容器的高度设置为150px，但这不是一个非常灵活的解决方案。如果我是你，我就不会用这些款式。创建div而不设置其宽度和高度时，它会自动调整大小以适合其子对象。不知何故#container:after阻止了此功能。用点别的：）

@marc audet它就像一个符咒，但右边仍然有奇怪的边距。我仍然不理解

容器：after

上的

垂直对齐：bottom

的意义，但我认为它是不可或缺的。。。谢谢。右边的小边距在Chrome中可见，但在Firefox中不可见。请看更新答案中的脚注。你是对的！谢谢，我认为它不起作用：在你的小提琴中，我在

#容器中添加了一个红色背景，我看到下面同样的空白。。。
#container {
  text-align: justify;
  background-color: #FF0000;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "This is some text";
    width: 100%;
    display: inline-block;
}