Question

我在页面上显示了一个视频缩略图列表。当然它们不适合一行，所以使用了多行，我希望它们的间距相等（在其他情况下，布局看起来很破碎）。我目前的标记是

.thumbs {
 width: 76%;
 float: left;
 margin: 0px 1em;
 text-align: justify;
 background-color: #DEE;
}

.thumb {
 display: inline-block;
 text-align: left;
}

标记是：

            <div class="thumbs">
                <div class="thumb">
                    <img src="http://placehold.it/160x120">
                    <div class="title">Test</div>
                </div>
                <div class="thumb">
                    <img src="http://placehold.it/160x120">
                    <div class="title">Test</div>
                </div>
                <!-- and so forth... -->
            </div>

在JsFiddle中相同：http://jsfiddle.net/cPm9f/

除了最后一行之外，一切都很好：我希望它与前一行隔开，但是空间不同:(我不能使用表格或只是填充一堆看不见的存根元素，因为这是响应式设计的基础因此显示的列数将是相关的在设备屏幕的宽度上。

如何将最后一行空间与之前的行空间平分？

UPD： cimmanon认为我想要的应该以不同的方式实施。如果是，那怎么样？

Answer 1

你的问题是`text-align：justify'的解释。最后一行通常不合理，因为如果最后一行相当短，则字母需要有一个荒谬的间距。

解决方法：

text-align: justify;
text-align-last: justify;

但据我所知{i}仅支持IE [编辑：和Mozilla text-align-last] ，所以让我们为其他人伪造另一行合理的文本：

-moz-text-align-last

http://jsfiddle.net/TWgDh/

Answer 2

.thumb:last-child {
    float:right;
}

？：）

http://jsfiddle.net/cPm9f/1/

Answer 3

如上所述，您可以使用它，但请注意IE9下的任何IE浏览器都不支持last-child CSS伪类。我不知道你打算支持什么，但值得了解。但是，first-child伪类在早期版本的IE中具有一些支持。

等间隔的div。多行

3 个答案: