響應圖片和列表

Question

Tryign得到它讓我有一個最大寬度圖像是308px，當瀏覽器縮放較大則列表將有每行多個項目。現在，它似乎陷入了每行3個列表項目，但如果我希望它完全響應，並且如果瀏覽器縮小到最小值，那麼它可以是每行一個圖像。

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

Answer 1

您需要使用媒體查詢。

只需爲每個「斷點」設置媒體查詢並更改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/

Answer 2

使用媒體查詢（根據SpaceBeers'建議）再加上列表項最小寬度屬性... JsFiddle

Answer 3

另一個想法是使用display: inline-block;而不是float: left並設置max-width: 308px;和列表項目爲。

demo

HTML：

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

我寫它（列表中的內容之間的意見）的方式並服務於一個目的 - any kind of whitespace matters when using 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%; 
}