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

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

全屏时的效果

宽度小于615的效果

屏幕宽度小于465的效果

样式代码:

.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>

1. 本站所有文章及资源来源于用户上传和网络,如有侵权请联系站长处理!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律,否则后果自负!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

中国站长社区 » 图片横排自适应宽度响应式CSS代码

发表评论

发布资源,赚取佣金,随时提现

立即发布 了解详情