调整<img/> s的字间距和文本对齐方式

Question

我有一系列<img>的div - 基本上只是一堆小图标。包含div的文本对齐在不同点上发生变化。有时它是右对齐的，有时是左对齐的，有时是合理的。

问题1：我希望此div中的每个图像之间都有间距。

通过给予他们保证金很容易实现。但是，他们说他们目前是正确的。我需要把边距放在每个边缘左边，这一切都很好。

但是当它们左对齐或对齐时，边距将会从左侧略微推动最左边的一个。

我希望我能够在包含div上使用像文字间距这样的东西，以便控制每个图像之间的空间。但显然，你无法以控制文本的方式控制它们。

实现这一目标的最佳方法是什么？

问题2：图片不合理，因为它们只占用1行。

我已经读过，解决方法是向容器中添加一个伪元素，但这似乎不能正常工作。我可能会遗漏一些东西。

我甚至尝试在图像的末尾添加<br>和 ，但是这没有创建新行的效果，因此我想要它来证明第一行的合理性。

以下是代码的设置方式：

<div id="projectPagePieces" style="width: 100%; text-align: justify;">
    <img title="Identity" src="imgs/icons/Identity.png">
    <img title="Festival Program" src="imgs/icons/Book.png">
    <img title="Poster" src="imgs/icons/Poster.png">
    <img title="Festival Trailer" src="imgs/icons/Video.png">
    <img title="Business Cards" src="imgs/icons/BusinessCard.png">
    <br> &nbsp;
</div>

---

#projectPagePieces {
    width:30%;
    word-spacing: 20px;
    display:inline-block; 
    vertical-align:text-top;
    text-align:right;
}

#projectPagePieces:after{ /*adds an extra line so first line will justify*/
    content:"";
    display: inline-block; 
    width: 100%; 
}

#projectPagePieces img {
    display:inline-block;
    margin-bottom:15px;
    height:20px;
    width:auto;
}

Answer 1

在Firefox中，我能够让你的代码在两种情况下都能正常工作。

我无法理解为什么你遇到问题，但至少 你现在有一个有效的例子。

.projectPagePieces {
    width: 100%; 
    text-align: right;
    border: 1px dotted blue;
    word-spacing: 25px;
    line-height: 0;
}
.projectPagePieces img {
    vertical-align: top;
    display: inline-block;
}
.projectPagePieces.stretch {
text-align: justify;
}
.projectPagePieces.stretch:after {
    content: "";
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

<h2>Ex 1</h2>
<div class="projectPagePieces">
    <img title="Identity" src="http://placehold.it/100x100">
    <img title="Festival Program" src="http://placehold.it/100x100">
    <img title="Poster" src="http://placehold.it/100x100">
    <img title="Festival Trailer"  src="http://placehold.it/100x100">
    <img title="Business Cards" src="http://placehold.it/100x100">
</div>
<h2>Ex 2</h2>
<div class="projectPagePieces stretch">
    <img title="Identity" src="http://placehold.it/100x100">
    <img title="Festival Program" src="http://placehold.it/100x100">
    <img title="Poster" src="http://placehold.it/100x100">
    <img title="Festival Trailer"  src="http://placehold.it/100x100">
    <img title="Business Cards" src="http://placehold.it/100x100">
</div>