画页面的时候经常遇到页面布局的问题，父级div包裹多个子div很常见，代码如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="father">
<div class="child all">1</div>
<div class="child all">2</div>
<div class="child all">3</div>
</div>
</body>
但是效果如下：
如果我想让多个子div横着排排坐，加 float:left 这个是个办法。效果如下：
为什么加float浮动会有效果，因为float 属性定义的元素如果没有指定一个明确的宽度，他们会尽可能地窄。
另一种办法是，给父级div加 display:table,然后给子div加 display:table-cell; 示例如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
display: table;
}
.child {
display: table-cell;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child all">1</div>
<div class="child all">2</div>
<div class="child all">3</div>
</div>
</body>