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

iflove 發布于2019-08-30 13:19 / 767人閱讀

摘要：本文默認你已經看過了我的上一篇文章圖片列表布局一，接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標題加上圖片標題效果如圖詳細的代碼可以參閱上一篇文章圖片列表布局一

本文默認你已經看過了我的上一篇文章 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;
}
    

    
        ...

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

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

效果如下

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

效果如下

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

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

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

好了，完美~

接下來把標題加上

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

    
        
            
                
            
        
        圖片標題

效果如圖

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

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

GPU云服務器云服務器 div布局布局html 布局div div布局 div網頁布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115472.html

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

摘要：本文默認你已經看過了我的上一篇文章圖片列表布局一，接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標題加上圖片標題效果如圖詳細的代碼可以參閱上一篇文章圖片列表布局一本文默認你已經看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例 showImg(https://seg...

KnewOne 2019-08-01 16:10 評論0 收藏0
div+css圖片列表布局（一）

摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個元素定一個寬度并向左浮動。是不是很簡單詳細代碼可以參考下一篇文章圖片列表布局二關注作者吧前端切圖的時候經常會遇到圖片布局，初學者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

Travis 2019-08-30 13:20 評論0 收藏0
div+css圖片列表布局（一）

摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個元素定一個寬度并向左浮動。是不是很簡單詳細代碼可以參考下一篇文章圖片列表布局二關注作者吧前端切圖的時候經常會遇到圖片布局，初學者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

ThreeWords 2019-08-01 16:10 評論0 收藏0
標簽語義化

摘要：主要總結標簽語義化方面的內容。的標簽都是有語義的。為什么要使用語義化標簽由于很強大，無論有沒有按照語義選擇標簽，都可以實現需要的設計。如何確定你的標簽是否語義良好去掉樣式，看網頁結構是否組織良好有序，是否仍然有良好的可讀性。主要總結標簽語義化方面的內容。 HTML的標簽都是有語義的。下面列出一些常見的標簽及其語義： showImg(https://segmentfault.co...

darkbaby123 2019-08-01 16:09 評論0 收藏0
DIV+CSS學習筆記總結篇

摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業規劃和前景職業方向規劃定位： web前端開發工程師 web網站架構師自己創業轉崗管理或其他 web前端開發的前景展望：未來IT行業企業需求...

iOS122 2019-08-29 11:13 評論0 收藏0