html - 为什么 `text-align:justify` 只对图像的第一行有效?

标签 html css

<分区>

我有几张跨越两行的图片。我希望能够将它们均匀地隔开。

我使用 text-align:justify 进行了测试,但出于某种原因,这在最后几行中不起作用(使用 Chrome 进行了测试)。有谁知道为什么会发生这种情况以及如何纠正?

调整演示窗口的大小,使图像换行。

JSFIDDLE:http://jsfiddle.net/1djb153n/

HTML:

<div class="bespokeimages">
    <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;
}

参见 fiddle :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` 只对图像的第一行有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30800975/

相关文章:

html - span 中词尾的 css 不正确

html - 并排显示单选按钮

javascript - jQuery 查找所有选中的行

html - 当我更改窗口宽度大小时,为什么我的页脚会跳到页面中央?

html - HTML5视频标签youtube

css - 有谁知道如何通过 CSS 创建这个 3d 翻转动画?

html - 如何使用 Flexbox 在导航栏中均匀间隔 <li> 元素? HTML

jquery - 内容加载后如何全方位展开div?

jquery - 根据设备在 'collapse' 和 'collapse in' 之间进行 Bootstrap 切换

javascript - 尝试在 Chrome 中获取 table height = 100%