前端切圖的時(shí)候經(jīng)常會遇到圖片布局，初學(xué)者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案：
float布局
display:inline-block布局
首先來講float布局的方法
非常簡單，一般我會使用ul li布局
<ul> <li><img src='./images/1.jpg'></li> <li><img src='./images/2.jpg'></li> <li><img src='./images/3.jpg'></li> <li><img src='./images/4.jpg'></li> <li><img src='./images/5.jpg'></li> <li><img src='./images/6.jpg'></li> <li><img src='./images/7.jpg'></li> <li><img src='./images/8.jpg'></li> <li><img src='./images/9.jpg'></li> </ul>然后給每個(gè)li元素定一個(gè)寬度并向左浮動。這里每行要顯示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%); /*再向上移動自身的50%*/}有的同學(xué)可能會想到用margin-top，而不是top。這里需要注意一下，margin-top和margin-bottom的百分比，一般是按容器元素的寬度而不是高度來計(jì)算的，padding同理
到這里，一個(gè)基本的三行三列圖片布局基本就完成了。
但是注意了，新手可能會忽略掉的一個(gè)隱藏問題：子元素浮動之后父容器坍塌了，有時(shí)候這種特性會嚴(yán)重影響到我們的布局。我們來測試一下，在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元素緊挨著.red元素了，ul元素表現(xiàn)得像是不存在一樣
這是因?yàn)樵馗雍蠛竺撾x了文檔流，關(guān)于浮動的原理可以參閱w3school的CSS 浮動以及CSS浮動屬性Float詳解，這里不再贅述。清除浮動的方法有很多，這里推薦添加:after偽元素去除浮動
...
.clearfix:after{ position: relative; content: ''; display: block; width: 0; height: 0; visibility: hidden; clear: both;}<div class='red'></div><ul class='clearfix'>...</ul><div class='blue'></div>再來看看效果，表現(xiàn)就正常了
詳細(xì)代碼可戳：http://runjs.cn/detail/fvcssbb7
同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
