1

6枚の写真を含む順序付けられていないリストがあります。リストに画像を 2 列のみで表示し、ウィンドウのサイズが変更されると画像を縮小したいと考えています。

jsFiddle のサンプルへのリンクは次のとおりです: http://jsfiddle.net/WuwYZ/

現時点では、ウィンドウの幅が 450px を超える場合は 3 つ以上の列が表示され、300px 未満の場合は 1 つの列が表示されます。

リストの最大幅を 300px に設定して、列が 2 つを超えないようにするにはどうすればよいですか? また、画像を 1 つの列にマージするのではなく、縮小するにはどうすればよいですか?

2 列の大きな画像:

 X X
 X X
 X X

ウィンドウが拡張されると、次のようになります (ただし、上記と同じままにしておきたい):

 X X X X 
 X X
4

1 に答える 1

4

liの幅をに設定するだけです50%。

#thumbs{
    max-width:300px;
}
#thumbs li {
    width: 50%;
    float: left;
}
#thumbs li img {
    width: 100%;
}

http://jsfiddle.net/WuwYZ/2/

于 2013-02-17T14:16:15.753 に答える