响应图片和列表

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%; 
}