我有一个图像列表(不在列表中,但可能是如果这可能解决问题),我想填充整个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; }
解决方法
最简单的方法是：
<style>
.justify-image{ text-align: justify;}
.justify-image img{display:inline-block;}
.justify-image:after{content:""; display: inline-block; width: 100%; height: 0;}
</style>
<p class="justify-image">
<img src="/path/img.jpg" alt="my image">
<img src="/path/img.jpg" alt="my image">
<img src="/path/img.jpg" alt="my image">
<img src="/path/img.jpg" alt="my image">
<img src="/path/img.jpg" alt="my image">
<img src="/path/img.jpg" alt="my image">
</p>
>您需要一个带有text-align的容器：justify;在这种情况下的段落.
>您的图片需要显示：inline-block;否则他们不会以“文本”的形式进行交互(在对齐文本的最后一行不会影响你需要添加一个,使它工作)
>你需要一行“文本”在你的图像下为了证明适用,伪元素你可以通过创建一个*：
*：之后：
不要忘记内容：“”;没有它,它不会出现.在我的例子中,我使用了一个内嵌块,宽度为100％.它将永远违反我的段落中的内容.
快乐编码！ 原文链接：https://www.f2er.com/css/214476.html
