div+css圖片清單佈局（二）

本文預設你已經看過了我的上一篇文章 p+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>

效果如下

由於我們的圖片素材尺寸差距太大，高度顯得參差不齊。如果需要對齊可以在定義了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>

效果如下

注意，一般不建議直接在img元素上定死高寬，因為如果圖片尺寸不是固定的，會引起圖片變形。可以採取寬度固定，高度自適應（或高度固定，寬度自適應）的方式。然後再img元素的外層套一層容器，固定寬高，並設定超出隱藏（overflow: hidden;）即可。

有時候ui會要求你行和列的間距要嚴格一樣

我們這裡行和列的間距是不一樣的，怎麼啵~
那就需要修改一下.content的樣式，不定義寬度，四周的空白間距使用padding來表示，並且設定box-sizing屬性為border-box。

好了，完美~

接下來把標題加上

.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>

效果如圖

網相關版圖！