CSS：使图像与文本的下方他们响应

Question

所以，我有以下情形：

如果它是所有图像我coudl容易让他们响应通过改变不同的视口宽度百分比然而这里的问题是图像下面有不同的文字，所以当你将宽度减小时，文字会将它推到下面。

有没有办法让这种类型的场景响应？

Answer 1

以下是响应式布局示例，此布局适合每个屏幕分辨率。

制作响应式布局时只需记住每个值应在%之间，并使用@media查询布局可以适应移动设备和平板设备。

例如检查这个CSS代码..

ul, p{margin:0; padding:0;} 
#gallery li {float:left;list-style-type:none; 
    padding:2px; min-width:22%;max-width:100%;width:22%} 
#gallery li img{display:block;width:100%;height:100%;} 
p{border:1px solid #000;width:100%;height:100%;} 

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
{ 
    ul#gallery{width:100%} 
} 
ul, p{margin:0; padding:0;} 
    #gallery li{width:100%;display:block;float:left;} 
} 

检查演示在这里。 http://jsbin.com/divuvehe/1/edit