div+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;
    /*內容底部對齊*/
}

圖片列表的行和列之間是有間隔的，咱們使用一個容器div.content把內容包起來，將.content的寬度設置爲父容器的80%，上下填充（paddind）大概20px

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

注意到每張圖片有白色的背景和邊框，咱們能夠給圖片再套一層容器

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

效果以下

因爲咱們的圖片素材尺寸差距太大，高度顯得良莠不齊。若是須要對齊能夠在定義了display: inline-block;的父容器使用;vertical-align: bottom。這裏咱們爲了高度的統一，須要給img標籤再套一層div，用來限定高度。

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

效果以下

注意，通常不建議直接在img元素上定死高寬，由於若是圖片尺寸不是固定的，會引發圖片變形。能夠採起寬度固定，高度自適應（或者高度固定，寬度自適應）的方式。而後再img元素的外層套一層容器，固定寬高，並設置超出隱藏（overflow: hidden;）便可。

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

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

好了，完美~

接下來把標題加上

.title{
    padding-top: 12px;
    font-size: 12px;
    color: #454545;
}
    
<li>
    <div class="content">
        <div class="img-wrap">
            <div class="img-box">
                <img src="1.jpg">
            </div>
        </div>
        <div class="title">圖片標題</div>
    </div>
</li>

效果如圖

詳細的代碼能夠參閱：http://runjs.cn/detail/ynt81wax

上一篇文章： div+css圖片列表佈局（一）