欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

div+css图片列表布局(二)

程序员文章站 2022-04-18 19:46:21
...
本文默认你已经看过了我的上一篇文章 p+css图片列表布局(一),接下来我们来实现复杂一点的图片列表布局。以下面的样式为例

div+css图片列表布局(二)

为了方便,我只列出display:inline-block的布局示例。

和上一篇介绍的一样,第一步也是给父容器li元素定义一个宽度

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
    vertical-align: bottom;
    /*内容底部对齐*/
}

图片列表的行和列之间是有间隔的,我们使用一个容器p.content把内容包起来,将.content的宽度设置为父容器的80%,上下填充(paddind)大概20px

.content {
    width:80%;
    padding: 10px 0;
    overflow: hidden;
}
    
<li>
    <p class="content">
        ...
    </p>
</li>

注意到每张图片有白色的背景和边框,我们可以给图片再套一层容器

.img-wrap {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}
<li>
    <p class="content">
        <p class="img-wrap">
            <img src="1.jpg">
        </p>
    </p>
</li>

效果如下

div+css图片列表布局(二)

由于我们的图片素材尺寸差距太大,高度显得参差不齐。如果需要对齐可以在定义了display: inline-block;的父容器使用;vertical-align: bottom。这里我们为了高度的统一,需要给img标签再套一层p,用来限定高度。

.img-box {
    height: 120px;
    overflow: hidden;
}
.img-box img {
    position: relative;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
    
<li>
    <p class="content">
        <p class="img-wrap">
            <p class="img-box">
                <img src="1.jpg">
            </p>
        </p>
    </p>
</li>

效果如下

div+css图片列表布局(二)

注意,一般不建议直接在img元素上定死高宽,因为如果图片尺寸不是固定的,会引起图片变形。可以采取宽度固定,高度自适应(或者高度固定,宽度自适应)的方式。然后再img元素的外层套一层容器,固定宽高,并设置超出隐藏(overflow: hidden;)即可。

有时候ui会要求你行和列的间距要严格一样

div+css图片列表布局(二)

我们这里行和列的间距是不一样的,怎么啵~
那就需要修改一下.content的样式,不定义宽度,四周的空白间距使用padding来表示,并且设置box-sizing属性为border-box。

div+css图片列表布局(二)

好了,完美~

接下来把标题加上

.title{
    padding-top: 12px;
    font-size: 12px;
    color: #454545;
}
    
<li>
    <p class="content">
        <p class="img-wrap">
            <p class="img-box">
                <img src="1.jpg">
            </p>
        </p>
        <p class="title">图片标题</p>
    </p>
</li>

效果如图

div+css图片列表布局(二)


更多 div+css图片列表布局(二) 相关文章请关注PHP中文网!

相关标签: css