成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ThreeWords / 830人閱讀

摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個(gè)元素定一個(gè)寬度并向左浮動(dòng)。是不是很簡單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧

前端切圖的時(shí)候經(jīng)常會遇到圖片布局，初學(xué)者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案：

float布局

display:inline-block布局

首先來講float布局的方法

float布局

非常簡單，一般我會使用ul li布局

    
    
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    •

然后給每個(gè)li元素定一個(gè)寬度并向左浮動(dòng)。這里每行要顯示3張圖片，那么每張圖片的寬度可以使用百分比來計(jì)算：100/3=33.3%。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列圖片排列*/
}

每個(gè)img標(biāo)簽的寬度設(shè)為100%，占滿整個(gè)li的寬度，為了防止圖片變形，高度自適應(yīng)

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列圖片排列*/
}

li img {
    width: 100%;
}

好了，咱們來看看效果。

怎么和我們想的不一樣？這時(shí)候列表是混亂的。別急，這是因?yàn)閳D片的尺寸不一。如果項(xiàng)目中圖片的尺寸差別太大的話，建議在父元素定死一個(gè)高度，并設(shè)置超出隱藏。但是如果圖片尺寸差別不大的話，建議設(shè)置height: auto;以達(dá)到高度自適應(yīng)的目的。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列圖片排列*/
    height: 100px;/*當(dāng)圖片尺寸不一的時(shí)候，設(shè)置一個(gè)高度*/
    overflow: hidden;/*超出隱藏*/
}

嗯~和我們的需求差不多了

這時(shí)候產(chǎn)品可能會要求你圖片要上下居中

li img {
    position: relative;
    width: 100%;
    top: 50%;/*li高度的一半*/
    transform: translateY(-50%); /*再向上移動(dòng)自身的50%*/
}

有的同學(xué)可能會想到用margin-top，而不是top。這里需要注意一下，margin-top和margin-bottom的百分比，一般是按容器元素的寬度而不是高度來計(jì)算的，padding同理

到這里，一個(gè)基本的三行三列圖片布局基本就完成了。

但是注意了，新手可能會忽略掉的一個(gè)隱藏問題：子元素浮動(dòng)之后父容器坍塌了，有時(shí)候這種特性會嚴(yán)重影響到我們的布局。我們來測試一下，在ul元素的前后分別添加一個(gè)div元素

.red{
    width: 100%;
    height: 30px;
    border: 1px solid red;
}
.blue{
    width: 100%;
    height: 30px;
    border: 1px solid blue;
}    
    



    ...

可以看到.blue元素緊挨著.red元素了，ul元素表現(xiàn)得像是不存在一樣

這是因?yàn)樵馗?dòng)后后脫離了文檔流，關(guān)于浮動(dòng)的原理可以參閱w3school的CSS 浮動(dòng)以及CSS浮動(dòng)屬性Float詳解，這里不再贅述。清除浮動(dòng)的方法有很多，這里推薦添加:after偽元素去除浮動(dòng)

.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í)候，需要設(shè)置一個(gè)最大高度*/
    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://systransis.cn/yun/50340.html

相關(guān)文章

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

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

    iflove 評論0 收藏0

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

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

    KnewOne 評論0 收藏0

  • div+css圖片列表布局（一）

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

    Travis 評論0 收藏0

  • css的結(jié)構(gòu)與布局

    摘要：實(shí)際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時(shí)，等于，否則等于?；诘姆椒ㄟ@種應(yīng)該算是最佳的解決辦法實(shí)現(xiàn)方法當(dāng)使用布局時(shí)，使用在水平和垂直方向都會居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個(gè)height值時(shí)，元素會自適應(yīng)其內(nèi)部的元素高度，有時(shí)我們想讓元素的寬度也達(dá)到此效果，應(yīng)用場景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開的...

    GeekQiaQia 評論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

    摘要：任務(wù)五一個(gè)最常見的移動(dòng)端頁面完成的事情學(xué)習(xí)張鑫旭世界相關(guān)章節(jié)張鑫旭系列了解通配符選擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計(jì)劃的事情找時(shí)間把前面任務(wù)的官方提供鏈接過一遍，查缺 任務(wù)五、 一個(gè)最常見的移動(dòng)端頁面 完成的事情 float學(xué)習(xí) 張鑫旭《CSS世界》相關(guān)章節(jié) 張鑫旭 float系列 了解CSS通配符 &...

    Jonathan Shieber 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<