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

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

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

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

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

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

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

圖片列表的行和列之間是有間隔的，我們使用一個(gè)容器div.content把內(nèi)容包起來(lá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;
}

效果如下

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

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

效果如下

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

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

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

好了，完美~

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

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

    
        
            
                
            
        
        圖片標(biāo)題

效果如圖

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

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

云服務(wù)器 GPU云服務(wù)器 div布局布局html 布局div div布局 div網(wǎng)頁(yè)布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50338.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

KnewOne

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【黑五】UltraVPS.eu：洛杉磯、英國(guó)、荷蘭、德國(guó)、立陶宛等特價(jià)KVM VPS

閱讀 2300·2021-11-24 11:15
CDN是什么？為何要用CDN加速網(wǎng)站？

閱讀 3186·2021-11-24 10:46
Furion分表分庫(kù)我也要happy coding

閱讀 1482·2021-11-24 09:39
raksmart，圣何塞獨(dú)立服務(wù)器測(cè)評(píng)，帶你了解下這個(gè)服務(wù)器怎么樣

閱讀 3989·2021-08-18 10:21
文本兩端對(duì)齊

閱讀 1539·2019-08-30 15:53
簡(jiǎn)單好用的CSS命名規(guī)范和JS代碼風(fēng)格

閱讀 1459·2019-08-30 11:19
重學(xué)前端學(xué)習(xí)筆記（四）--div和span不是夠用嗎？

閱讀 3390·2019-08-29 18:42
CSS中clip-path屬性的使用

閱讀 2424·2019-08-29 16:58

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章