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