繁体   English   中英

CSS:使图像下方的文字具有响应性

[英]CSS: Make Images with text below them Responsive

所以我有以下情况:

在此处输入图片说明

如果是所有图像,我可以通过更改不同视口上的宽度百分比轻松地使它们响应,但是这里的问题是图像下面的图像具有变化的文本,因此当您减小宽度时,文本会将项目推到其下方。

有没有一种方法可以使这种情况做出响应?

这是“响应式布局”示例,根据屏幕分辨率,此布局将适合它。

进行响应式布局时,只需记住每个值都应以%并且使用@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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM