CSS：使图像下方的文本具有响应性

【问题标题】：CSS: Make Images with text below them ResponsiveCSS：使图像下方的文本具有响应性
【发布时间】：2014-02-25 06:26:28
【问题描述】：

所以我有以下场景：

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

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

【问题讨论】：

文本推动它下面的项目有什么问题？
text 只能在 X 或 Y 两个方向上增长。

标签： css image text grid responsive-design

【解决方案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

【讨论】：