这道题是我面试一家大数据公司的一道面试题，这算是很简单的面试题了，但它主要还是考验你的思维发散能力，下面那些方法中我只想到了前面的3种方法，后面三种是面试官教我的，面试官人超级好，还叫我好好打扎实基础再来面试，不过意思就是，你目前能力还不够，回家看书吧（捂脸）。
一、inline-block 元素的方法
block元素和inline-block元素的区别就是block元素可设置宽高，且换行，而inline-block元素也可设置宽高，但不换行。这个方法几乎没有任何缺点。
1 <style type="text/css">
2 div {
3 display: inline-block;
4 width: 100px;
5 height: 100px;
6 border: 1px solid black;
7 margin: 10px;
8 }
9 </style>
10
11 <body>
12 <div>1</div>
13 <div>2</div>
14 <div>3</div>
15 </body>
二、position : absolute 的方法
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，它不会占据空间；absolute的方法实现起来相对麻烦，而且会使元素脱离文档流。
1 <style type="text/css">
2 .div1 {
3 width: 100px;
4 height: 100px;
5 border: 1px solid black;
6 position: absolute;
7 left: 20px;
8 top: 20px;
9 }
10 .div2 {
11 width: 100px;
12 height: 100px;
13 border: 1px solid black;
14 position: absolute;
15 left: 140px;
16 top: 20px;
17 }
18 .div3 {
19 width: 100px;
20 height: 100px;
21 border: 1px solid black;
22 position: absolute;
23 left: 260px;
24 top: 20px;
25 }
26 </style>
27
28 <body>
29 <div class="div1">1</div>
30 <div class="div2">2</div>
31 <div class="div3">3</div>
32 </body>
三、position : relative 的方法
相对定位元素的定位是相对其正常位置，可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。这个方法虽然不会脱离文档流，但实现起来比absolute的方法还麻烦，意见不要使用。
1 <style type="text/css">
2 div{
3 width: 100px;
4 height: 100px;
5 border: 1px solid black;
6 }
7 .div1 {
8 left: 20px;
9 top: 20px;
10 }
11 .div2 {
12 position: relative;
13 left: 140px;
14 top: -82px;
15 }
16 .div3 {
17 position: relative;
18 left: 260px;
19 top: -184px;
20 }
21 </style>
22
23 <body>
24 <div class="div1">1</div>
25 <div class="div2">2</div>
26 <div class="div3">3</div>
27 </body>
四、float方法
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，之前的元素将不会受到影响。这个方法实现也相对简单，但会脱离文档流，也会使元素变成块级元素。
1 <style type="text/css">
2 div {
3 width: 100px;
4 height: 100px;
5 border: 1px solid black;
6 margin: 10px;
7 float: left;
8 }
9 </style>
10
11 <body>
12 <div>1</div>
13 <div>2</div>
14 <div>3</div>
15 </body>
五、table的方法
table实现并排盒子模型的方法比较巧妙，但要注意border-collapse和border-space这两个属性的应用。
1 <style type="text/css">
2 /*table不要设置这个属性border-collapse: collapse; 否则实现不了*/
3 table {
4 border-spacing: 20px; /*边框空隙*/
5 }
6 td {
7 border: 1px solid black;
8 width: 100px;
9 height: 100px;
10 }
11 </style>
12
13 <body>
14 <table>
15 <tr>
16 <td>1</td>
17 <td>2</td>
18 <td>3</td>
19 </tr>
20 </table>
21 </body>
六、flex弹性布局
flex这个方法之前我是不知道的，上网百度了答案，flex感觉可以应用在很多地方，非常有用。
1 <style type="text/css">
2 .box {
3 display: flex;
4 /*flex-direction决定主轴的方向（即项目的排列方向） ，值： row | row-reverse
5 | column | column-reverse;
6 */
7 flex-direction: row;
8 /*
9 flex-wrap属性定义，如果一条轴线排不下，如何换行。
10 （1）nowrap（默认）：不换行。
11 （2）wrap：换行，第一行在上方。
12 （3）wrap-reverse：换行，第一行在下方。
13 */
14 flex-wrap: nowrap;
15 /*简写
16 flex-flow:row nowrap;
17 */
18 /*justify-content属性定义了项目在主轴上的对齐方式。
19 值: flex-start | flex-end | center | space-between | space-around;
20 */
21 justify-content: flex-start;
22
23 }
24 .contain {
25 width: 100px;
26 height: 100px;
27 border: 1px solid black;
28 margin: 10px;
29 }
30 </style>
31
32 <body>
33 <div class="box">
34 <div class="contain">1</div>
35 <div class="contain">2</div>
36 <div class="contain">3</div>
37 </div>
38 </body>