前端切图的时候经常会遇到图片布局,初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案:
首先来讲float布局的方法 float布局非常简单,一般我会使用ul li布局 <ul> <li><img src='./images/1.jpg'></li> <li><img src='./images/2.jpg'></li> <li><img src='./images/3.jpg'></li> <li><img src='./images/4.jpg'></li> <li><img src='./images/5.jpg'></li> <li><img src='./images/6.jpg'></li> <li><img src='./images/7.jpg'></li> <li><img src='./images/8.jpg'></li> <li><img src='./images/9.jpg'></li> </ul> 然后给每个li元素定一个宽度并向左浮动。这里每行要显示3张图片,那么每张图片的宽度可以使用百分比来计算:100/3=33.3%。
每个img标签的宽度设为100%,占满整个li的宽度,为了防止图片变形,高度自适应 li { list-style: none; float: left; width: 33.3%;/*三列图片排列*/}li img { width: 100%;} 好了,咱们来看看效果。 怎么和我们想的不一样?这时候列表是混乱的。别急,这是因为图片的尺寸不一。如果项目中图片的尺寸差别太大的话,建议在父元素定死一个高度,并设置超出隐藏。但是如果图片尺寸差别不大的话,建议设置height: auto;以达到高度自适应的目的。
嗯~和我们的需求差不多了 这时候产品可能会要求你图片要上下居中 li img { position: relative; width: 100%; top: 50%;/*li高度的一半*/ transform: translateY(-50%); /*再向上移动自身的50%*/} 有的同学可能会想到用margin-top,而不是top。这里需要注意一下,margin-top和margin-bottom的百分比,一般是按容器元素的宽度而不是高度来计算的,padding同理 到这里,一个基本的三行三列图片布局基本就完成了。 但是注意了,新手可能会忽略掉的一个隐藏问题:子元素浮动之后父容器坍塌了,有时候这种特性会严重影响到我们的布局。我们来测试一下,在ul元素的前后分别添加一个div元素
可以看到.blue元素紧挨着.red元素了,ul元素表现得像是不存在一样 这是因为元素浮动后后脱离了文档流,关于浮动的原理可以参阅w3school的CSS 浮动以及CSS浮动属性Float详解,这里不再赘述。清除浮动的方法有很多,这里推荐添加:after伪元素去除浮动 <span type="button" data-toggle="tooltip" data-placement="top" data-clipboard-text=".clearfix:after{ position: relative; content: " ';="" display:="" block;="" width:="" 0;="" height:="" visibility:="" hidden;="" clear:="">
.clearfix:after{ position: relative; content: ''; display: block; width: 0; height: 0; visibility: hidden; clear: both;}<div class='red'></div><ul class='clearfix'>...</ul><div class='blue'></div> 再来看看效果,表现就正常了 详细代码可戳:http:///detail/fvcssbb7 display:inline-block布局同float布局差不多,只是我们要把float: left;替换成display: inline-block;
来看一下效果,出现了间隙,而且被挤成两行了。怎么回事?~ ul { width: 100%; margin: 0 auto; font-size: 0;} 这样,我们想要的效果就完成了。是不是很简单 |
|