实验开始：首先建一个table
Html代码
复制代码 代码示例:
1.<table style='border:1px solid;width:300px'>
2. <tr>
3. <td><div>div1</div><div>div2</div></td>
4. <td>3</td>
5. </tr>
6.</table>
效果：两个div没有设宽度，所以他们默认的上下排列了
实验1：div1的display:inline
Html代码
复制代码 代码示例:
1.<table style='border:1px solid;width:300px'>
2. <tr>
3. <td><div style='display:inline'>div1</div><div>div2</div></td>
4. <td>3</td>
5. </tr>
6.</table>
效果：div1变短了，因为他要与他后面的元素放在一行了，但div2没有任何设定所以它还是默认的宽度，也就在div1的下面了，如果把div2的display也设上inline的话，他也会变短，然后就会和div1一行了,
事实上是如果在div1后面的元素是固定长的那么他们也会在一行的
Html代码
复制代码 代码示例:
1.<table style='border:1px solid;width:300px'>
2. <tr>
3. <td><div style='display:inline'>div1</div><span style='outline:1px solid'>span2</span></td>
4. <td>3</td>
5. </tr>
6.</table>
span的宽度和内容一致，但是如果span在前面 div在前面会怎么样呢？
Html代码
复制代码 代码示例:
1.<table style='border:1px solid;width:300px'>
2. <tr>
3. <td><span style='outline:1px solid; display:inline'>span1</span><div style='width: 50px'>div2</div></td>
4. <td>3</td>
5. </tr>
6.</table>
如果div2的宽度很小，还是在下面，想让div2上去的话，只要也给他设定display:inline，要注意这里。
实验2：之前的div都变短了，如果想要div还是自动变宽的话怎么办呢
Html代码
复制代码 代码示例:
1.<table style='border:1px solid;width:300px'>
2. <tr>
3. <td><span style='outline:1px solid; display:inline; float:right;margin-top:6px'>span1</span><div>div2</div></td>
4. <td><div style='display:inline; '>div2</div><span style='outline:1px solid; display:inline; '>span1</span></td>
5. </tr>
6.</table>
效果：请注意一下代码，第一个td里的span是写在div前面的，他用float:right飘到右边了，这样第一个td里的div就是自动宽度的。
实验3
display的block, inline, inline-block的区别
block：是带有换行的区域，不管容器多宽都换行，div默认是这个。
inline-block：容器够宽就排在一行，不够宽还是要换行， 这个换行是整个line在换行。
inline：容器够宽就排一行 像inline，不够宽就换行 像 block，注意ie8以后的版本才有这个。
