CSS圖片兩端對齊，自適應列表佈局末行對齊修復例項頁面
阿新 • • 發佈：2018-12-17
寫在前面
前端開發，圖片兩端對齊，是十分常見的，也是十分痛苦的，我試過好多方法，通過整理，認為下面還是比較靠譜的，在實踐中大家可以試試，歡迎一起學習，一起進步
HTML程式碼
HTML程式碼非常簡單，用的是DIV，裡面用的是SPAN標籤。沒有采用Ul li 標籤，是因為在實踐應用中總是出現好多坑，無論怎麼除錯都解決不了，也許是我學藝不精吧。但是方法總比困難多，繞開他。使用css的display:inline-block，text-align:justify;下面簡單介紹一下這兩個：
display 屬性規定元素應該生成的框的型別。inline-block是display中的一個屬性值，表示 將物件呈遞為內聯物件，物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內，允許空格。這一性質正好滿足我們圖片同行顯示的要求。
text-align 屬性規定元素中的文字的水平對齊方式。justify是text-align的一個屬性值，表示兩端對齊。
<div class="box"> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span><span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友~~</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <spanclass="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> <span class="list"><img src="http://agoodlife.cn/PicBox/201811/Infomaiton_200_180_Infomaiton_201811041101000.jpg" /><br />你好啊，我的朋友</span> </div>
CSS程式碼
.box{width:50%; line-height:0; padding:20px 20px 0; margin:20px auto; background-color:#f0f3f9; text-align:justify;} .list{width:120px; display:inline-block; line-height:1.4; padding-bottom:20px; text-align:center; vertical-align:top;} .list img{width: 100px; height: 128px;}
上面的CSS程式碼非常簡單，我簡單解釋一下，box是個容器，添加了text-align:justify;目的是，使裡面的文字兩單對齊，裡面的SPAN標籤可以繼承文字屬性，為了使圖片一行顯示新增CSS樣式 display:inline-block;這樣就可以使兩端對齊，可以直接調整圖片大小，每行的圖片顯示個數自動適應，最終效果如下圖：
作為收藏筆記，希望大家不斷完善，謝謝！！！！！！！！！！！！！