页面布局常用，让子级div排排坐

画页面的时候经常遇到页面布局的问题，父级div包裹多个子div很常见，代码如下：

<div>
<div style='width:100px;height: 100px;background: rgb(23,121,78);'></div>
<div style='width:100px;height: 100px;background: rgb(12,121,67);'></div>
<div style='width:100px;height: 100px;background: rgb(21,121,12);'></div>
<div style='width:100px;height: 100px;background: rgb(124,121,121);'></div>
</div>

但是效果如下：



如果我想让多个子div横着排排坐，加 float:left 这个是个办法。

另一种办法是，给父级div加 display:table,然后给子div加 display:table-cell;

<div style='display: table;'>
<div style='width:100px;height: 100px;background: rgb(23,121,78);'></div>
<div style='width:100px;height: 100px;background: rgb(12,121,67);display:table-cell;'></div>
<div style='width:100px;height: 100px;background: rgb(21,121,12);display:table-cell;'></div>
<div style='width:100px;height: 100px;background: rgb(124,121,121);display:table-cell;'></div
</div>