text-jusyify下的inline-block自适应列表布局末行对齐修复实例页面

HTML代码：

<div class="box">

<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦，美女，口水，鼻血~~~</span>
<span class="justify_fix"></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;}
.left_fix{height:0; padding:0; overflow:hidden;}

最终效果：

源文件下载： CSS图片两端对齐