欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 程序代码 > 图片横排自适应宽度响应式CSS代码
这篇文章主要为大家详细介绍了图片横排自适应宽度响应式CSS代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

多张图片响应式水平排列自适应效果CSS代码

全屏时的效果

图片横排自适应宽度响应式CSS代码

宽度小于615的效果

图片横排自适应宽度响应式CSS代码

屏幕宽度小于465的效果

图片横排自适应宽度响应式CSS代码

样式代码:

.test {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 10px;
    min-width: 150px;
}
.container {
    width: 100%;
}
@media (max-width:615px ) {
.test {
    float: left;
    width: 33%;
    box-sizing: border-box;
    padding: 10px;
    min-width: 150px;
}
}
@media (max-width:465px ) {
.test {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    min-width: 150px;
}
}
@media (max-width:315px ) {
.test {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}
}

html代码

<div class="container">
           <div class="test" > <img src="home_1.png" style="max-width: 100%;"/> </div>
           <div class="test" > <img src="home_2.png" style="max-width: 100%;"/> </div>
           <div class="test" > <img src="home_3.png" style="max-width: 100%;"/> </div>
           <div class="test" > <img src="home_4.png" style="max-width: 100%;"/> </div>
         </div>
以上就是图片横排自适应宽度响应式CSS代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 图片自适应

上一篇JS实现网站动态显示倒计时教程

下一篇如何创建一个网络快捷方式(.URL)文件?

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在