資訊專欄INFORMATION COLUMN
摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個元素定一個寬度并向左浮動。是不是很簡單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧
前端切圖的時候經(jīng)常會遇到圖片布局，初學(xué)者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案：
float布局
display:inline-block布局
首先來講float布局的方法
float布局非常簡單，一般我會使用ul li布局
然后給每個li元素定一個寬度并向左浮動。這里每行要顯示3張圖片，那么每張圖片的寬度可以使用百分比來計算：100/3=33.3%。
li {
list-style: none;
float: left;
width: 33.3%;/*三列圖片排列*/
}
每個img標(biāo)簽的寬度設(shè)為100%，占滿整個li的寬度，為了防止圖片變形，高度自適應(yīng)
li {
list-style: none;
float: left;
width: 33.3%;/*三列圖片排列*/
}
li img {
width: 100%;
}
好了，咱們來看看效果。
怎么和我們想的不一樣？這時候列表是混亂的。別急，這是因為圖片的尺寸不一。如果項目中圖片的尺寸差別太大的話，建議在父元素定死一個高度，并設(shè)置超出隱藏。但是如果圖片尺寸差別不大的話，建議設(shè)置height: auto;以達到高度自適應(yīng)的目的。
li {
list-style: none;
float: left;
width: 33.3%;/*三列圖片排列*/
height: 100px;/*當(dāng)圖片尺寸不一的時候，設(shè)置一個高度*/
overflow: hidden;/*超出隱藏*/
}
嗯~和我們的需求差不多了
這時候產(chǎn)品可能會要求你圖片要上下居中
li img {
position: relative;
width: 100%;
top: 50%;/*li高度的一半*/
transform: translateY(-50%); /*再向上移動自身的50%*/
}
有的同學(xué)可能會想到用margin-top，而不是top。這里需要注意一下，margin-top和margin-bottom的百分比，一般是按容器元素的寬度而不是高度來計算的，padding同理
到這里，一個基本的三行三列圖片布局基本就完成了。
但是注意了，新手可能會忽略掉的一個隱藏問題：子元素浮動之后父容器坍塌了，有時候這種特性會嚴(yán)重影響到我們的布局。我們來測試一下，在ul元素的前后分別添加一個div元素
.red{
width: 100%;
height: 30px;
border: 1px solid red;
}
.blue{
width: 100%;
height: 30px;
border: 1px solid blue;
}
可以看到.blue元素緊挨著.red元素了，ul元素表現(xiàn)得像是不存在一樣
這是因為元素浮動后后脫離了文檔流，關(guān)于浮動的原理可以參閱w3school的CSS 浮動以及CSS浮動屬性Float詳解，這里不再贅述。清除浮動的方法有很多，這里推薦添加:after偽元素去除浮動
.clearfix:after{
position: relative;
content: "";
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}
再來看看效果，表現(xiàn)就正常了
詳細(xì)代碼可戳：http://runjs.cn/detail/fvcssbb7
display:inline-block布局同float布局差不多，只是我們要把float: left;替換成display: inline-block;
li {
list-style: none;
display: inline-block;
width: 33.3%;
/*三列圖片排列*/
height: 100px;
/*當(dāng)圖片尺寸不一的時候，需要設(shè)置一個最大高度*/
text-align: center;
/*內(nèi)容居中*/
overflow: hidden;
/*超出隱藏*/
}
來看一下效果，出現(xiàn)了間隙，而且被擠成兩行了。怎么回事？~
注意，inline-block的元素之間會存在間隙，具體請參閱張鑫旭的博客。這里使用font-size: 0;方法清除元素間的間隙
ul {
width: 100%;
margin: 0 auto;
font-size: 0;
}
這樣，我們想要的效果就完成了。是不是很簡單
詳細(xì)代碼可以參考：http://runjs.cn/detail/l867rsbv
下一篇文章：div+css圖片列表布局（二）
關(guān)注作者吧~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50340.html
摘要：本文默認(rèn)你已經(jīng)看過了我的上一篇文章圖片列表布局一，接下來我們來實現(xiàn)復(fù)雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標(biāo)題加上圖片標(biāo)題效果如圖詳細(xì)的代碼可以參閱上一篇文章圖片列表布局一 本文默認(rèn)你已經(jīng)看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實現(xiàn)復(fù)雜一點的圖片列表布局。以下面的樣式為例 showImg(https://seg...
摘要：本文默認(rèn)你已經(jīng)看過了我的上一篇文章圖片列表布局一，接下來我們來實現(xiàn)復(fù)雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標(biāo)題加上圖片標(biāo)題效果如圖詳細(xì)的代碼可以參閱上一篇文章圖片列表布局一 本文默認(rèn)你已經(jīng)看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實現(xiàn)復(fù)雜一點的圖片列表布局。以下面的樣式為例 showImg(https://seg...
摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個元素定一個寬度并向左浮動。是不是很簡單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧 前端切圖的時候經(jīng)常會遇到圖片布局，初學(xué)者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...
摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時，等于，否則等于。基于的方法這種應(yīng)該算是最佳的解決辦法實現(xiàn)方法當(dāng)使用布局時，使用在水平和垂直方向都會居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個height值時，元素會自適應(yīng)其內(nèi)部的元素高度，有時我們想讓元素的寬度也達到此效果，應(yīng)用場景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開的...
摘要：任務(wù)五一個最常見的移動端頁面完成的事情學(xué)習(xí)張鑫旭世界相關(guān)章節(jié)張鑫旭系列了解通配符選擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計劃的事情找時間把前面任務(wù)的官方提供鏈接過一遍，查缺 任務(wù)五、 一個最常見的移動端頁面 完成的事情 float學(xué)習(xí) 張鑫旭《CSS世界》相關(guān)章節(jié) 張鑫旭 float系列 了解CSS通配符 &...
閱讀 2707·2023-04-25 19:13
閱讀 4054·2021-09-22 15:34
閱讀 3065·2019-08-30 14:23
閱讀 1473·2019-08-29 17:17
閱讀 1616·2019-08-29 16:05
閱讀 1548·2019-08-29 13:26
閱讀 1226·2019-08-29 13:19
閱讀 564·2019-08-29 13:16
