0

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

#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

为什么右边的边距很小？如何摆脱图像下方添加的空白空间？

4

3 回答 3

2

您可以使用以下对 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 标记中的空白的结果。最右边的元素在结束标记之前有一个空格字符 (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。

于 2013-11-13T12:06:41.703 回答
0

如果您在 #container:after 的 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;
}

http://www.w3schools.com/cssref/sel_after.asp 查看此链接了解更多详情。#container:after 在容器中的所有其他内容加载后添加内容。

解决问题的一种方法是将容器的高度设置为 150 像素，但这不是一个非常灵活的解决方案。如果我是你，我不会使用这些样式。当您创建一个 div 并且没有设置它的宽度和高度时，它会自动调整大小以适应它的孩子。#container:after 以某种方式阻止了此功能。只需使用其他东西:)

于 2013-11-13T12:22:35.563 回答
0

另一种没有此空白和填充问题的方法是：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;
}

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

于 2013-11-13T12:09:52.347 回答