css - 图像行均匀分布

Question

我想要一排图像均匀分布和对齐，经过一些研究我发现了这个优雅的方法:

#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>

在此处查看结果:http://codepen.io/naio/pen/vbgrm

为什么右边那个小边距？如何去掉图片下方添加的空白区域？

Answer 1

您可以通过对 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;
}

从伪元素(空字符串)生成的内容会创建一个内联框，其高度等于包含 block 的行高(本例中为 #container)。

通过设置line-height: 0 ，这会强制任何行内框缩小到零高度。

脚注

在 Chrome(和类似的 webkit 浏览器)中，您会在该行最右边的元素右侧看到一些额外的空间。在 Firefox 中看不到这个额外的空间(我在其中测试了代码)。

额外的空间是原始 HTML 标记中空白的结果。最右边的元素在结束前有一个空白字符 (CR/LF) </div>标记，此生成的内容放置在空白之后，这在某些浏览器中显示。

您可以通过如下修改 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>

即保持收尾</div>在最后一个 img 旁边标记标签。