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

KnewOne 發(fā)布于2019-08-01 16:10 / 921人閱讀

摘要：本文默認(rèn)你已經(jīng)看過了我的上一篇文章圖片列表布局一，接下來我們來實現(xiàn)復(fù)雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標(biāo)題加上圖片標(biāo)題效果如圖詳細(xì)的代碼可以參閱上一篇文章圖片列表布局一

本文默認(rèn)你已經(jīng)看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實現(xiàn)復(fù)雜一點的圖片列表布局。以下面的樣式為例

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

和上一篇介紹的一樣，第一步也是給父容器li元素定義一個寬度

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列圖片排列*/
    text-align: center;
    /*內(nèi)容居中*/
    overflow: hidden;
    /*超出隱藏*/
    vertical-align: bottom;
    /*內(nèi)容底部對齊*/
}

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

.content {
    width:80%;
    padding: 10px 0;
    overflow: hidden;
}
    

    
        ...

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

.img-wrap {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}

效果如下

由于我們的圖片素材尺寸差距太大，高度顯得參差不齊。如果需要對齊可以在定義了display: inline-block;的父容器使用;vertical-align: bottom。這里我們?yōu)榱烁叨鹊慕y(tǒng)一，需要給img標(biāo)簽再套一層div，用來限定高度。

.img-box {
    height: 120px;
    overflow: hidden;
}
.img-box img {
    position: relative;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

效果如下

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

有時候ui會要求你行和列的間距要嚴(yán)格一樣

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

好了，完美~

接下來把標(biāo)題加上

.title{
    padding-top: 12px;
    font-size: 12px;
    color: #454545;
}
    

    
        
            
                
            
        
        圖片標(biāo)題

效果如圖

詳細(xì)的代碼可以參閱：http://runjs.cn/detail/ynt81wax

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