百分比div宽高相等,制作简单实用宽高相等照片栏

先看代码:

.box{font-size: 0;}
.item{
    display: inline-block;
    position: relative;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    background: red;
    }
.item:nth-child(2n){background: #ccc}
百分比div宽高相等,制作简单实用宽高相等照片栏_第1张图片
效果图

这里有两处解释一下:
1.item 设置 dispaly:inline-block 让他能在一行排列且不脱离文档流,再设置宽度为25%。此时原则上四个排列在一行的 div 。但由于inline-block自带属性让每个div之间有间隙 ,解决方法:在父元素box上添加font-size:0的属性
2.item 设置 height:0;padding-top/bottom:25% ,此时的padding是根据窗口的宽度来计算的。

最后我们再给item下面加上图片,item设置相对定位;img设置绝对定位、宽高为100%

全部代码:



    
![](images/headPic.jpg)
![](images/headPic.jpg)
![](images/headPic.jpg)
![](images/headPic.jpg)
百分比div宽高相等,制作简单实用宽高相等照片栏_第2张图片
效果图

你可能感兴趣的:(百分比div宽高相等,制作简单实用宽高相等照片栏)