◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
如何使用CSS创建一个响应式图片库
ID:13091 / 打印
使用CSS创建响应式图库，您可以尝试运行以下代码
示例
在线演示
<!DOCTYPE html> <html> <head> <style> div.myGallery { border: 2px solid orange; } div.myGallery:hover { border: 1px solid blue; } div.myGallery img { width: 100%; height: auto; } div.desc { padding: 20px; text-align: center; } .responsive { padding: 0 5px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 5px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class = "responsive"> <div class = "myGallery"> <a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg"> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial" style="max-width:90%" style="max-width:90%"> </a> <div class = "mydiv">3D Animation Tutorial></div> </div> </div> <div class = "responsive"> <div class = "myGallery"> <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg"> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial" style="max-width:90%" style="max-width:90%"> </a> <div class = "mydiv">Swift Video Tutorial</div> </div> </div> <div class = "responsive"> <div class = "myGallery"> <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg"> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial" style="max-width:90%" style="max-width:90%"> </a> <div class="mydiv">CSS Tutorial</div> </div> </div> <div class = "clearfix"></div> </body> </html>