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

时间：2023-04-02 20:28:32 HTML

本文假设你已经阅读了我之前的文章div+css图片列表布局（一），接下来我们来实现一个更复杂的图片列表布局。以下列样式为例。为方便起见，我只列出了display:inline-block布局示例。如前文所述，第一步是为父容器li元素定义一个宽度{list-style:none;显示：内联块；宽度：33.3%；/*三列图片排列*/text-align:center;/*内容居中*/overflow:hidden;/*超出隐藏*/vertical-align:bottom;/*contentbottomaligned*/}图片列表的行和列之间有空隙，我们用一个容器div.content包裹内容，设置.content的宽度为父容器的80%，并填满向下（paddind）大约20px.content{width:80%;填充：10px0；overflow:hidden;}

...

注意每张图片都有白色的背景和边框，我们可以在图片上再加一层容器。img-wrap{填充：10px；背景色：#fff；border:1pxsolid#ccc;

的效果如下因为我们的图片素材尺寸相差太大，所以显得高低不均。如果需要对齐，可以在定义display的父容器中使用：inline-block;;垂直对齐：底部。这里为了统一高度，我们需要在img标签中再添加一层div来限制高度。.img-box{高度：120px；溢出：隐藏；}.img-boximg{位置：相对；宽度：100%；顶部：50%；转换：translateY(-50%);}