Div排版测试
代码:
<div style="clear:both">
<div style="float:left; background-color:#3399FF; width:200px">我是第一个DIV</div>
<div style="float:left; background-color:#FFFF66; width:100px">我是第二个DIV</div>
<div style="float:left; background-color:#33CC33; width:100px">我是第三个DIV</div>
</div>
<div style="clear:both; width:300px">
<div style="background-color:#990000; width:150px; color:#FFFFFF">纵向排版DIV1号</div>
<div style="background-color:#006699; width:120px; color:#FFFFFF">纵向排版DIV2号</div>
<div style="background-color:#33FF00; width:290px; color:#FFFFFF">纵向排版DIV3号</div>
</div>
效果:
<div style="clear:both">
<div style="float:left; background-color:#3399FF; width:200px">我是第一个DIV</div>
<div style="float:left; background-color:#FFFF66; width:100px">我是第二个DIV</div>
<div style="float:left; background-color:#33CC33; width:100px">我是第三个DIV</div>
</div>
<div style="clear:both; width:300px">
<div style="background-color:#990000; width:150px; color:#FFFFFF">纵向排版DIV1号</div>
<div style="background-color:#006699; width:120px; color:#FFFFFF">纵向排版DIV2号</div>
<div style="background-color:#33FF00; width:290px; color:#FFFFFF">纵向排版DIV3号</div>
</div>
效果:
我是第一个DIV
我是第二个DIV
我是第三个DIV
纵向排版DIV1号
纵向排版DIV2号
纵向排版DIV3号
-----------------------------------------------------------------