前端切圖的時候常常會遇到圖片佈局,初學者可能會比較生疏。接下來我會以3行3列的圖片列表爲列子介紹兩種經常使用的切圖方案:css
首先來說float佈局的方法html
很是簡單,通常我會使用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>
而後給每一個li元素定一個寬度並向左浮動。這裏每行要顯示3張圖片,那麼每張圖片的寬度可使用百分比來計算:100/3=33.3%。segmentfault
li { list-style: none; float: left; width: 33.3%;/*三列圖片排列*/ }
每一個img標籤的寬度設爲100%,佔滿整個li的寬度,爲了防止圖片變形,高度自適應wordpress
li { list-style: none; float: left; width: 33.3%;/*三列圖片排列*/ } li img { width: 100%; }
好了,我們來看看效果。佈局
怎麼和咱們想的不同?這時候列表是混亂的。別急,這是由於圖片的尺寸不一。若是項目中圖片的尺寸差異太大的話,建議在父元素定死一個高度,並設置超出隱藏。可是若是圖片尺寸差異不大的話,建議設置height: auto;以達到高度自適應的目的。測試
li { list-style: none; float: left; width: 33.3%;/*三列圖片排列*/ height: 100px;/*當圖片尺寸不一的時候,設置一個高度*/ overflow: hidden;/*超出隱藏*/ }
嗯~和咱們的需求差很少了spa
這時候產品可能會要求你圖片要上下居中ssr
li img { position: relative; width: 100%; top: 50%;/*li高度的一半*/ transform: translateY(-50%); /*再向上移動自身的50%*/ }
有的同窗可能會想到用margin-top,而不是top。這裏須要注意一下,margin-top和margin-bottom的百分比,通常是按容器元素的寬度而不是高度來計算的,padding同理3d
到這裏,一個基本的三行三列圖片佈局基本就完成了。
可是注意了,新手可能會忽略掉的一個隱藏問題:子元素浮動以後父容器坍塌了,有時候這種特性會嚴重影響到咱們的佈局。咱們來測試一下,在ul元素的先後分別添加一個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元素表現得像是不存在同樣
這是由於元素浮動後後脫離了文檔流,關於浮動的原理能夠參閱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>
再來看看效果,表現就正常了
詳細代碼可戳:http://runjs.cn/detail/fvcssbb7
同float佈局差很少,只是咱們要把float: left;替換成display: inline-block;
li { list-style: none; display: inline-block; width: 33.3%; /*三列圖片排列*/ height: 100px; /*當圖片尺寸不一的時候,須要設置一個最大高度*/ text-align: center; /*內容居中*/ overflow: hidden; /*超出隱藏*/ }
來看一下效果,出現了間隙,並且被擠成兩行了。怎麼回事?~
注意,inline-block的元素之間會存在間隙,具體請參閱張鑫旭的博客。這裏使用font-size: 0;方法清除元素間的間隙
ul { width: 100%; margin: 0 auto; font-size: 0; }
這樣,咱們想要的效果就完成了。是否是很簡單
詳細代碼能夠參考:http://runjs.cn/detail/l867rsbv
下一篇文章:div+css圖片列表佈局(二)
關注做者吧~