CSS：使图像下面有文字响应

Question

所以我有以下情况：

如果是所有图像，我可以通过更改不同视图端口上的宽度百分比轻松地使它们响应，但是这里的问题是图像下面有不同的文本，所以当你使宽度变小时，文本将推动项目低于它。

有没有办法让这种情况响应？

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