用inline-block实现图片并排展示，随着窗口大小自己适应放几个一排

最新推荐文章于 2022-12-02 16:16:23 发布

akxj2022

最新推荐文章于 2022-12-02 16:16:23 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html+js+css 文章标签： html css iview vue

本文链接：https://blog.youkuaiyun.com/akxj2022/article/details/88537218

html+js+css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过设置display:inline-block和响应式布局，实现类似淘宝购物页的商品图片并排展示效果。当浏览器窗口大小变化时，图片会自动调整排列数量。关键步骤包括包裹元素、设置display属性及定义块内样式。示例代码和最终效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

像淘宝购物页一样，很多商品图片并排展示，如果把浏览器缩小点，并排展示的就少几个，挤到下一排

实现方式很简单，把握几个要领：

1. 用一个div包裹所有的东西

2. 循环的块最外面用div或者a标签都行，但是一定加上display:inline-block，并设定好这个块显示出来的大小（宽+高）

3. 块里面的东西，随便定义咯，怎么漂亮怎么显示吧

html代码：

<html>
    
    <head></head>
    
    <body>
        <div>
            <a v-for="item in uploadList" class="file-image-a">
                <span class="file-image-title" :title="item.fileName">{{item.fileName}}</span>
                <img class="file-image" :src="item.location" :alt="fileImage" />
                <button type="primary" size="small" plain="" class="file-image-button">下载</button></a>
        </div>
    </body>

</html>

css代码：


    .file-image-a {
        width: 150px;
        height: 210px;
        margin-left: 5px;
        margin-right: 5px;
        display: inline-block;
        overflow: hidden;
    }

    .file-image {
        width: 100%;
        height: 150px;
    }

    .file-image-title {
        font-size: 10px;
        color: gray;
        width: 100%;
        text-align: center;
        /*设置过长省略号*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .file-image-button {
        width: 100%;
    }

数据：

var uploadList=[{
          id: 1,
          fileName: '图片1hgghsghsfjgflksgs工时费数据库管理费寄过经济法刚搜了就',
          location: filesync
        }, {
          id: 1,
          fileName: '图片1hgghsghsfjgflksgs工时费数据库管理费寄过经济法刚搜了就',
          location: filesync
        }, {
          id: 1,
          fileName: '图片1hgghsghsfjgflksgs工时费数据库管理费寄过经济法刚搜了就',
          location: filesync
        }, {
          id: 1,
          fileName: '图片1hgghsghsfjgflksgs工时费数据库管理费寄过经济法刚搜了就',
          location: filesync
        }, {
          id: 1,
          fileName: '图片1hgghsghsfjgflksgs工时费数据库管理费寄过经济法刚搜了就',
          location: filesync
        }, {
          id: 1,
          fileName: '图片1hgghsghsfjgflksgs工时费数据库管理费寄过经济法刚搜了就',
          location: filesync
        }]

效果如下图：

至此，over