正如题目。在移动端布局的时候,这个很有用(不用js的情况下)。有这样一个场景:
有若干张图片,图片的宽高各不相同(如果图片宽高相同就好搞了哈),让这些图片显示在网页中。要求每行显示三张(照片横向,纵向有一定的间隔,且距离父容器的间隔为0),显示的高度等于宽度,并且让图片在容器中居中显示。另外,在图片上浮动显示照片的介绍以及类型等(浮动几个小span。这个是前边要求额外的。)。
下边,这些问题先一个一个的解决。
怎么实现一行显示三张图片呢。手机不通,分辨率等不同。你没法去固定一个宽度。所以,这里我们用百分比来计算。如果要让一行三个,先设置父容器的宽度为100%。自身容器的宽度为100% /3。 但是,又要求图片之间横纵向间隔一定像素。理想效果如下图所示:
好在,css中有calc这个方法。可以混合百分比,像素等来计算。于是,图片div的宽度就可以计算出来了(假设图片横向间隔为4像素)。
width: calc((100% - 8px)/3);
图片容器的宽度出来了,怎么让图片容器的高度等于宽度呢。这个用js,jquery很好实现。
$(document).ready(function(){ $('.box1').css('height',$('.box1').css('width')); })
但在这里,不想用js或jquery来实现。就像用css。起初,异想天开的以为用这个可以实现。
height: calc(width);
想法是美好的,现实是残酷的。这个方法不行。于是,有了以下两种方法(暂时实现过的)。
方法1:
width: 40%;
height: 0px;
padding-bottom: 40%;
只要设置width为一固定百分比,height为0,padding-bottom和宽度的百分比一样。这样就可以实现一个div的宽高一样了。width,height,padding,这些很好理解,很好懂,就是不知道为什么这样写可以写出正方形来。如果想以平均分隔三张图片。可以这样写。
.list{ width: 100%; height: auto; } .list .item { position: relative; float:left; display: inline-block; width: calc((100% - 8px)/3); height: 0px; padding-bottom: calc((100% - 8px)/3); margin-left:4px; background: url(1.jpg) top center no-repeat; background-size:cover; cursor: pointer; } .list .item:first-child { margin-left: 0px; } .list .item:last-child { margin-left: 0px; }
该样例中,必须最多三个item。
方法2:
div{ display:inline-block; width:20%; } div:before { content:""; display:inline-block; padding-bottom:100%; }
利用伪元素before也可以达到效果。
两种方法实现了div的宽高相等,之前实现了平均分隔。现在要实现的就是image的适应以及句中。image可以作为div的一个元素来显示,即background-image。给其设置background-size为cover,然后设置background-image属性为top center即可句中。最后内部元素布局,用div的绝对定位就可以实现。
再啰嗦一句。敲代码的时候,如果几个连在一起的div换行了,div之间会存在一定的空位,及时margin设置为0了也没有用。这个时候可以将这几个div连在一起不换行。或者给该div一个float属性。或者用js替换空格吧。