1

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

.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 认为我想要的应该以不同的方式实现。如果是，那怎么办？

4

3 回答 3

1

您的问题是对“文本对齐：对齐”的解释。最后一行通常是不合理的，因为如果最后一行很短，字母就需要有一个荒谬的间距。

解决方法：

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

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

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

http://jsfiddle.net/TWgDh/

于 2012-11-27T01:45:42.797 回答
0 
.thumb:last-child {
    float:right;
}
​

? :)

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

于 2012-11-26T22:05:27.210 回答
0

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

于 2012-11-26T22:15:27.663 回答