3

サムネイルのリストがあります。サイズは固定されています。ウィンドウの幅に応じて、一列に並ぶサムネイルの数を変えてほしい。

Twitter Bootstrapを使えば簡単です：http：//jsfiddle.net/charlesbourasseau/5WvAL/

問題は、画面が4.5サムネイルのように受け入れることができる場合、それらはすべて左に整列し、右側にギャップが生じることです。

サムネイルが中央に留まる可能性があるかどうか知りたいので、左右のギャップは常に同じです...

4

1 に答える 1

7

float:left次のように、サムネイルのプロパティを上書きしてli設定しdisplay:inline-block、次にtext-align:center親ulに設定するだけです。

CSS

.thumbnails {
    text-align: center;
}
.thumbnails li {
    width: 150px;
    height: 100px;
    background: red;
    float: none !important; /* to overwrite the default property on the bootstrap stylesheet */
    display: inline-block;
    *display: inline; /* ie7 support */
    zoom: 1;
}

デモ： http： //jsfiddle.net/thirtydot/5WvAL/21/

于 2012-06-20T13:19:10.993 に答える