关于图片的均匀分布问题（布局问题）

　　最近做了一个网站，里面的图片要求能在一行中均匀分布，实现的方法有很多，总结为以下几种：

一、float布局+width加宽

这个方法实现的起来很简单，下面就是加宽了50px。但是这样有时会出现一些问题，一是给ul添加样式的时候，比如背景颜色、边框等；二是在这一行元素后面紧跟着其他元素。当然也有利用margin负值的方法，只是我个人感觉出现的问题都差不多。解决的方法是在外面再嵌套一层div，只是这样一来代码略显臃肿，当然为了兼容，这也是最常用、最快速的方法（加宽可以向后加宽，也可以向前加）。

<style>
    ul{padding: 0; width: 750px; list-style: none; border: dashed 1px #ccc; overflow: hidden;}
    li{float: left; margin-right: 50px; width: 100px; height: 50px; background: #999}
</style>

二、display：inline-block/text-align:justify

该方法确实是一个简单有效的方法，有篇文章介绍的很详细：display:inline-block/text-align:justify下列表的两端对齐布局

但是text-align有个硬伤，那就是元素必须超过一行，如果现在我只想来一个一行的图片均匀排布，那就需要在加一个无语义的标签用于使之前的元素两端对齐。这样的方法其实和clear一样，虽然方便，但会增加无意义的标签。

---

 

（2017-05-04）当然现在回过来看的话，还是可以用伪类来实现的，只不过inline-block 在ie9以下不支持

三、使用justify-content:space-between

四、使用css3的column方法

　　（这两个方法并不是很常见，可参考：http://www.cnblogs.com/PeunZhang/p/3289493.html）

五、display：table-cell

这个方法很强大，只是被大家挖掘的比较少。该方法用于图片的均匀分布还是很方便的，可以使用width控制宽度，使用padding来调节间距。

---

 

（2017-05-04另外，该方法还可以用来实现垂直居中，只是ie7以下不支持     在此引用一下鑫前辈的文章http://www.zhangxinxu.com/wordpress/?p=1187）

六、css相邻元素选择器

这个方法很实用，它对第一个元素不起作用，对后面的可以操作【其实就是相当于对所有li添加样式，然后在对li:first-child初始化】，下面是css样式：

ul{padding: 0; list-style: none; width: 700px; border: dashed 1px #ccc; overflow: hidden; text-align: justify;}
li{float: left; width: 100px; height: 50px; background: #999}
li+li{margin-left: 50px;}

结果是完美的，没有额外的标签，也不会产生什么问题，当然如果是有多行图片的话，这个方法还是力有未逮的。

---

 

（2017-05-04）除非指定换行的元素添加上class类，不过最近看到css对于性能的影响的文章，css在渲染时执行的效率是：id > 层级+id > class > 层级+class > 标签 > 层级+标签

所以如果这些元素是固定数量的话，添加上class，综合html大小和css渲染效率，还是可取的。

七、flex布局

现在还要在加上flex布局，这个方法确实很强大，网上教程很多，在此就不赘述了，这是阮一峰前辈的文章http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html