实现效果似乎相同,都是显示在一行。区别在于使用了display:inline,则该元素变为了内联元素,同时宽高也就无效了;而float则使元素变为块元素,且宽高属性是有效的。
<style type="text/css">
.d{width:100px; height:50px; background:#009966; float:left;}
</style>
<div class="d">DIV1</div>
<div class="d" style="background:#999999;">IDV2</div>
效果图:float:left
将float:left改为display:inline后
另:使用display:inline这一特性,可实现当两DIV被放在另一DIV中,两DIV不回行显示
<style type="text/css">
.c{width:80px; height:50px; background:#CCFFCC; white-space:nowrap} /* 容器需要设定 white-space:nowrap 样式*/
.d{width:50px; height:50px; background:#009966; display:inline;} /*宽高无意义,为突出对比而存在*/
</style>
<div class="c">
<div class="d">DddIV1</div>
<div class="d" style="background:#999999;">IDV2</div>
</div>
如果内部两DIV样式为float的话就会回行