CSS圖片兩端對齊，自適應列表佈局末行對齊修復實例頁面

寫在前面

前端開發，圖片兩端對齊，是十分常見的，也是十分痛苦的，我試過好多方法，經過整理，認爲下面仍是比較靠譜的，在實踐中你們能夠試試，歡迎一塊兒學習，一塊兒進步

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>
<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>
<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;這樣就可使兩端對齊，能夠直接調整圖片大小，每行的圖片顯示個數自動適應，最終效果以下圖：

做爲收藏筆記，但願你們不斷完善，謝謝！！！！！！！！！！！！！

原文出處：https://www.cnblogs.com/helpall/p/10129719.html