html – 为什么`text-align：justify`只适用于第一行图像？

概述参见英文答案 > Justify the last line of a div?                                    9个 我有几个图像跨越两行.我希望能够均匀地将它们分开. 我使用text-align：justify进行了测试,但由于某种原因,这不适用于最后一行(使用Chrome测试).有谁知道为什么会发生这种情况以及如何纠正？ 调整演示窗口的大小,使图像换行到 参见英文答案 > Justify the last line of a div?                                    9个
我有几个图像跨越两行.我希望能够均匀地将它们分开.

我使用text-align：justify进行了测试,但由于某种原因,这不适用于最后一行(使用Chrome测试).有谁知道为什么会发生这种情况以及如何纠正？

调整演示窗口的大小,使图像换行到另一行.

Jsfiddle：http://jsfiddle.net/1djb153n/

HTML：

<div >    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" /></div>

CSS：

.bespokeimages {    text-align:justify;}

解决方法 尝试使用flexBox(相同的HTML)：

.bespokeimages {    display: flex;    flex-wrap: wrap;    justify-content: space-around;}.bespokeimages img {    flex: none;}

看小提琴：http://jsfiddle.net/1djb153n/2/

还有其他的justify-content变体,请参见此处：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有关浏览器支持,请参见：http://caniuse.com/#feat=flexbox

总结

以上是内存溢出为你收集整理的html – 为什么`text-align：justify`只适用于第一行图像？全部内容，希望文章能够帮你解决html – 为什么`text-align：justify`只适用于第一行图像？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。