父元素宽度不定，多个子元素如何平均分布？

Question

类似效果：

问题：父元素宽度自适应浏览器窗口宽度，那么其中的子元素如何水平均匀分布呢（包含左右外边距）？

需要兼容ie8不考虑flex等css3布局。

Answer 1

父元素宽度百分比，里面框框inline-block且宽度百分比，然后给框框加外边距百分比。另外框框外边距设为百分比这个百分比是根据父元素宽度来定的，所以所有框框宽度(%)加上所有框框所有外边距(%)=父元素宽度(即100%)即可。补充：用inline-block元素与元素间会多出间隙导致间距偏大，这个问题你搜搜怎么解决，详细的就不在这展开了。

Answer 2

flex布局

Answer 3

flex布局了解一下父容器display:flex;然后调试justify-content，选择你想要的效果。

Answer 4

1.首尾外边距 2% 中间外边距1% 占据7%父元素的宽度 在拼接html时动态添加进去2.每个元素本身占据 93%/元素个数 <li style="width:'+(93/itemsLength).toFixed(6)+'+'%';float:left;display:inline-block"><li>