一行自适应显示三张图片

实现方式如下所示：

<ul>

    <li><div><img /></div></li>

    <li><div><img /></div></li>

    <li><div><img /></div></li>

</ul>

ul {

    overflow： hidden；//ul清除浮动：

}

li {

    width: 33.33%; //宽度设置1/3

    float：left；//设置左浮动

    box-sizing: border-box; //若两张图片之间有间距，可以使用border-box属性，并设padding；

    padding-right: 10px;

    padding-bottom：10px；//为保持高宽一致，padding-bottom也该设为和padding-right一样

    div{ //这个div是宽高相等的正方形

        width: 100%;

        padding-top:100%;

        position: relative;//img需要绝对定位

    }

    img{ //图片绝对定位

        position：absolute；

        width：100%；

        height：100%；

    }

}

PS：还有一种方法，不用将li设为border-box，这时候不能设padding，需要设margin，

比如第一个li和第二个li设margin-right：10px，则第三个需要设为margin-right：-20px；否则会溢出。