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;
}

伪元素（空字符串）中生成的内容会创建一个内联框，其高度等于包含块的行高（在此示例中为#container）。

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

脚注

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

额外空间是原始HTML标记中的空白区域的结果。最右边的元素在结束</div>标记之前有一个空格字符（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>

即，将结束</div>标记保留在最终img标记旁边。

Answer 2

另一种没有这个空白的方法＆amp;填充问题将是： http://jsfiddle.net/eNKhy/3/

#container {  
     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    vertical-align: bottom;
}
#container, #container img, .stretch{
    line-height:0;
}

并在div的末尾添加<span class="stretch"></span>

Answer 3

如果你在#container：after的内容属性中加入了一些文字，你会注意到它的作用

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

#container img {
  display: inline-block;
}

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

http://www.w3schools.com/cssref/sel_after.asp 有关更多详细信息，请查看此链接。 #container：在加载容器中的其他所有内容后添加内容。

解决问题的一种方法是将容器的高度设置为150px，但这不是一个非常灵活的解决方案。如果我是你，我不会使用这些风格。当你创建一个div并且没有设置它的宽度和高度时，它会自动调整大小以适合它的孩子。不知何故#container：after阻止了这个功能。只需使用别的东西：）

一排图像均匀分布

3 个答案:

脚注