div+css图片列表布局（二）

iflove 发布于2019-08-30 13:19 / 766人阅读

摘要：本文默认你已经看过了我的上一篇文章图片列表布局一，接下来我们来实现复杂一点的图片列表布局。以下面的样式为例为了方便，我只列出的布局示例。好了，完美接下来把标题加上图片标题效果如图详细的代码可以参阅上一篇文章图片列表布局一

本文默认你已经看过了我的上一篇文章 div+css图片列表布局（一），接下来我们来实现复杂一点的图片列表布局。以下面的样式为例

为了方便，我只列出display:inline-block的布局示例。

和上一篇介绍的一样，第一步也是给父容器li元素定义一个宽度

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
    vertical-align: bottom;
    /*内容底部对齐*/
}

图片列表的行和列之间是有间隔的，我们使用一个容器div.content把内容包起来，将.content的宽度设置为父容器的80%，上下填充（paddind）大概20px

.content {
    width:80%;
    padding: 10px 0;
    overflow: hidden;
}
    

    
        ...

注意到每张图片有白色的背景和边框，我们可以给图片再套一层容器

.img-wrap {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}

效果如下

由于我们的图片素材尺寸差距太大，高度显得参差不齐。如果需要对齐可以在定义了display: inline-block;的父容器使用;vertical-align: bottom。这里我们为了高度的统一，需要给img标签再套一层div，用来限定高度。

.img-box {
    height: 120px;
    overflow: hidden;
}
.img-box img {
    position: relative;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

效果如下

注意，一般不建议直接在img元素上定死高宽，因为如果图片尺寸不是固定的，会引起图片变形。可以采取宽度固定，高度自适应（或者高度固定，宽度自适应）的方式。然后再img元素的外层套一层容器，固定宽高，并设置超出隐藏（overflow: hidden;）即可。

有时候ui会要求你行和列的间距要严格一样

我们这里行和列的间距是不一样的，怎么啵~
那就需要修改一下.content的样式，不定义宽度，四周的空白间距使用padding来表示，并且设置box-sizing属性为border-box。

好了，完美~

接下来把标题加上

.title{
    padding-top: 12px;
    font-size: 12px;
    color: #454545;
}
    

    
        
            
                
            
        
        图片标题

效果如图

详细的代码可以参阅：http://runjs.cn/detail/ynt81wax

上一篇文章： div+css图片列表布局（一）

云服务器 GPU云服务器 div布局布局html 布局div div布局 div网页布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115472.html

div+css图片列表布局（二）

摘要：本文默认你已经看过了我的上一篇文章图片列表布局一，接下来我们来实现复杂一点的图片列表布局。以下面的样式为例为了方便，我只列出的布局示例。好了，完美接下来把标题加上图片标题效果如图详细的代码可以参阅上一篇文章图片列表布局一本文默认你已经看过了我的上一篇文章 div+css图片列表布局（一），接下来我们来实现复杂一点的图片列表布局。以下面的样式为例 showImg(https://seg...

KnewOne 2019-08-01 16:10 评论0 收藏0
div+css图片列表布局（一）

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案： showImg(https://segmentfault.c...

Travis 2019-08-30 13:20 评论0 收藏0
div+css图片列表布局（一）

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案： showImg(https://segmentfault.c...

ThreeWords 2019-08-01 16:10 评论0 收藏0
标签语义化

摘要：主要总结标签语义化方面的内容。的标签都是有语义的。为什么要使用语义化标签由于很强大，无论有没有按照语义选择标签，都可以实现需要的设计。如何确定你的标签是否语义良好去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性。主要总结标签语义化方面的内容。 HTML的标签都是有语义的。下面列出一些常见的标签及其语义： showImg(https://segmentfault.co...

darkbaby123 2019-08-01 16:09 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

iOS122 2019-08-29 11:13 评论0 收藏0