1

画像の最大幅が308pxになるように取得してみてください。ブラウザを拡大すると、リストには1行あたりのアイテム数が増えます。今のところ、行ごとに3つのリスト項目でスタックしているように見えますが、完全に応答性を持たせたい場合、およびブラウザーを最小に拡大すると、行ごとに1つの画像になります。

html

<ul>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
</ul>

css

ul{
    position:relative;
    float:left;
    width:100%;
    height:100%;
    margin:45px 0 0;
}
ul li{
    width: 33.3333%;
    float:left;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

JSFIDDLE

4

3 に答える 3

7

メディアクエリを使用する必要があります。

「ブレークポイント」ごとにメディアクエリを設定し、li幅を変更するだけです。

例えば：

    /* Show one image on devices under 540px */
    @media screen and (max-width: 540px) { 
       ul li{
        width: 100%;
        float:left;
       }
    }

    /* Show three images on devices between 550 and 800px wide */  
    @media screen and (min-width: 540px) and (max-width: 800px) {
       ul li{
        width: 33.333%;
        float:left;
       }
    }

    /* Show five images on devices between 800px and 1180pxwide */  
    @media screen and (min-width: 800px) and (max-width: 1180px) {
       ul li{
        width: 20%;
        float:left;
       }
    }

http://jsfiddle.net/spacebeers/gfjDk/3/

于 2012-10-04T14:18:44.133 に答える
0

リストアイテムのmin-widthプロパティと組み合わせて（SpaceBeersの提案に従って）メディアクエリを使用します... JsFiddle

于 2012-10-04T14:20:28.643 に答える
0

別のアイデアは、リスト項目のdisplay: inline-block;代わりに、およびfloat: leftを設定することです。max-width: 308px;min-width: 100px;

デモ

HTML：

<ul>
    <li><img src="image.jpg"></li><!--
    --><li><img src="image.jpg"></li><!-- as many more list items as you need
    -->
</ul>

私がそれを書いた方法（リスト項目の間にコメントを付けて）は目的を果たします-を使用するときはどんな種類の空白も重要inline-blockです。

CSS：

ul {
    padding: 0;
    margin: 45px 0 0;
}
ul li{
    min-width: 100px;
    width: 33.3333%;
    max-width: 308px; 
    display: inline-block;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}
于 2012-10-04T17:14:31.233 に答える