欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

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

• float布局

• display:inline-block布局

首先來(lái)講float布局的方法

float布局

非常簡(jiǎn)單，一般我會(huì )使用ul li布局

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

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

每個(gè)img標簽的寬度設為100%，占滿(mǎn)整個(gè)li的寬度，為了防止圖片變形，高度自適應

好了，咱們來(lái)看看效果。

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

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

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

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

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

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

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

.red{    width: 100%;    height: 30px;    border: 1px solid red;}.blue{    width: 100%;    height: 30px;    border: 1px solid blue;}        <div class='red'></div><ul>...</ul><div class='blue'></div>

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

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

再來(lái)看看效果，表現就正常了

詳細代碼可戳：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;    /*當圖片尺寸不一的時(shí)候，需要設置一個(gè)最大高度*/    text-align: center;    /*內容居中*/    overflow: hidden;    /*超出隱藏*/}

來(lái)看一下效果，出現了間隙，而且被擠成兩行了。怎么回事？~
注意，inline-block的元素之間會(huì )存在間隙，具體請參閱張?chǎng)涡竦牟┛?/a>。這里使用font-size: 0;方法清除元素間的間隙

這樣，我們想要的效果就完成了。是不是很簡(jiǎn)單
詳細代碼可以參考：http://runjs.cn/detail/l867rsbv