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

Travis 发布于2019-08-30 13:20 / 3118人阅读

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧

前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案：

float布局

display:inline-block布局

首先来讲float布局的方法

float布局

非常简单，一般我会使用ul li布局

然后给每个li元素定一个宽度并向左浮动。这里每行要显示3张图片，那么每张图片的宽度可以使用百分比来计算：100/3=33.3%。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

每个img标签的宽度设为100%，占满整个li的宽度，为了防止图片变形，高度自适应

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

li img {
    width: 100%;
}

好了，咱们来看看效果。

怎么和我们想的不一样？这时候列表是混乱的。别急，这是因为图片的尺寸不一。如果项目中图片的尺寸差别太大的话，建议在父元素定死一个高度，并设置超出隐藏。但是如果图片尺寸差别不大的话，建议设置height: auto;以达到高度自适应的目的。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
    height: 100px;/*当图片尺寸不一的时候，设置一个高度*/
    overflow: hidden;/*超出隐藏*/
}

嗯~和我们的需求差不多了

这时候产品可能会要求你图片要上下居中

li img {
    position: relative;
    width: 100%;
    top: 50%;/*li高度的一半*/
    transform: translateY(-50%); /*再向上移动自身的50%*/
}

有的同学可能会想到用margin-top，而不是top。这里需要注意一下，margin-top和margin-bottom的百分比，一般是按容器元素的宽度而不是高度来计算的，padding同理

到这里，一个基本的三行三列图片布局基本就完成了。

但是注意了，新手可能会忽略掉的一个隐藏问题：子元素浮动之后父容器坍塌了，有时候这种特性会严重影响到我们的布局。我们来测试一下，在ul元素的前后分别添加一个div元素

.red{
    width: 100%;
    height: 30px;
    border: 1px solid red;
}
.blue{
    width: 100%;
    height: 30px;
    border: 1px solid blue;
}    
    

...

可以看到.blue元素紧挨着.red元素了，ul元素表现得像是不存在一样

这是因为元素浮动后后脱离了文档流，关于浮动的原理可以参阅w3school的CSS 浮动以及CSS浮动属性Float详解，这里不再赘述。清除浮动的方法有很多，这里推荐添加:after伪元素去除浮动

.clearfix:after{
    position: relative;
    content: "";
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}


...

再来看看效果，表现就正常了

详细代码可戳：http://runjs.cn/detail/fvcssbb7

display:inline-block布局

同float布局差不多，只是我们要把float: left;替换成display: inline-block;

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    height: 100px;
    /*当图片尺寸不一的时候，需要设置一个最大高度*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
}

来看一下效果，出现了间隙，而且被挤成两行了。怎么回事？~
注意，inline-block的元素之间会存在间隙，具体请参阅张鑫旭的博客。这里使用font-size: 0;方法清除元素间的间隙

ul {
    width: 100%;
    margin: 0 auto;
    font-size: 0;
}

这样，我们想要的效果就完成了。是不是很简单
详细代码可以参考：http://runjs.cn/detail/l867rsbv

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

关注作者吧~

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

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

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

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

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

iflove 2019-08-30 13:19 评论0 收藏0
div+css图片列表布局（二）

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

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

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

ThreeWords 2019-08-01 16:10 评论0 收藏0
css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0
【CSS练习】IT修真院--练习5-护工个人界面

摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺任务五、一个最常见的移动端页面完成的事情 float学习张鑫旭《CSS世界》相关章节张鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 评论0 收藏0