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:私が望むものは別の方法で実装する必要があるというシマノンによる意見があります。もしそうなら、どのように？

4

3 に答える 3

1

問題は `text-align: justify' の解釈です。最後の行がかなり短い場合、文字にばかげた間隔が必要になるため、通常、最後の行は正当化されません。

回避策:

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

しかし、私の知るtext-align-last限りでは、IE [編集: および 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

上記のように、これを使用できますが、最後の子CSS 疑似クラスは、IE9 より前の IE ブラウザーではサポートされていないことに注意してください。何をサポートするつもりかはわかりませんが、知っておく価値はあります。ただし、最初の子の疑似クラスは、以前のバージョンの IE である程度サポートされています。

于 2012-11-26T22:15:27.663 に答える