css - 等间距的div。多行

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/

除最后一行外一切正常:我希望它与前几行间隔开，但空间不同:(我不能使用表格或只是填充一堆不可见的 stub 元素，因为这是响应式设计的基础因此显示的列数将取决于关于设备屏幕的宽度。

关于如何使最后一行空间与之前行空间相等有什么想法吗？

UPD:cimmanon 认为我想要的应该以不同的方式实现。如果是，那又如何？

Answer 1

您的问题是text-align: justify 的解释。最后一行通常是不对齐的，因为如果最后一行很短，字母之间的间距就会很荒谬。

解决方法:

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

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

.thumbs:after { display: inline-block; width: 100%; content: ""; }

http://jsfiddle.net/TWgDh/