css - 文本对齐 : justify and images

Question

我有一个图像列表(不在列表中，但可能会解决问题)我想填充整个 div 的宽度。我已经尝试了底部的代码，虽然它确实证明了 p 标签中的任何文本是合理的，但它对图像却没有同样的作用。我怎样才能让它在 div 的整个宽度上均匀分布图像？

<div>
  <p>
    <img src="image1.png" alt="foo" />
    <img src="image2.png" alt="foo" />
    <img src="image3.png" alt="foo" />
    <img src="image4.png" alt="foo" />
    <img src="image5.png" alt="foo" />
  </p>
</div>

我的 CSS:

div { width: 30em; }
p { text-align: justify; }

Answer 1

最简单的制作方法是:

.justify-image{ text-align: justify;}
.justify-image img{display:inline-block;}
.justify-image:after{content:""; display: inline-block; width: 100%; height: 0;}

<p class="justify-image">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">

</p>

1. 您需要一个带有 text-align:justify; 的容器(本例中为 <p> 段落。)
2. 您的图片需要 display:inline-block; 否则它们将不会作为“文本”进行交互(在证明文本的最后一行不受影响，您需要添加一个以使其工作。)
3. 你需要在你的图像下面有一行“文本”来证明应用，使用伪元素你可以通过创建一个 * :after 轻松实现它。 .

*:after :
别忘了 content:""; 。没有它，它不会出现。在我的示例中，我使用了 inline-block 与 width:100% 。它总是会在我的段落内容之后换行。

编码愉快! :)