两个span在div内一个居左一个居右布局

把span当作div来布局结构，让一个span在div里居左，一个span在div内居右，采用float浮动布局。

一、关键CSS代码：

二、div内布局span实例

实例说明：一个div设置一定宽度，再里面放置两个span盒子，为了能看见span盒子是否靠左靠右布局，同时设置css边框。

1、完整HTML代码

span在div内居左居右 实例 css5.com.cn

#tcss{ width:400px; overflow:hidden}

.left{ float:left; width:180px; border:1px solid #F00}

.right{ float:right; width:200px; border:1px solid #00F}

使用span其实与使用div一样布局，只是标签不同而已，使用float无论是span还是div均能实现框架布局。

2、效果截图

div css实例实现span在div内居左和居右布局

三、总结

虽然默认情况下span不是块元素，默认不会独占一行，看似没有div那样有独占一行的特性，但加入了float浮动属性后其功能和div一样了，能作为框架标签使用，只是通常我们使用div来布局框架，而span布局小局部，字体修饰等来使用。

作者：css5原创