DIV+CSS一行两列布局

来源：本站原创 点击：5445 时间：2007年04月19日 论坛讨论 [字号：大中小] 实现效果： main 我是包在外面的div col1 我是第一列col2 我是第二列clear-float;我用来清除浮动（清除float） 以下是说明： CSS代码： .main{width:800px;/* 总的宽度 */ background:red; } .main .col1{ float:left;/* 这个是关键的地方 让col1往左浮动，这样它的后面（右边）就可以放置别的元素（别的元素：可以是div，图片，文字等） */ width:300px;height:300px; background:#eee;border:1px solid #ccc; } .main .col2{ float:left;/* 这个是关键的地方 让col2也往左浮动，紧跟在col1的后面 */ margin-left:5px;/* 让col2和col1之间有些间隔 */ width:490px;height:300px;/* 给一个尺寸 可以随意*/ background:#ddd; border:1px solid #ccc; } .clear-float{clear:both}/* 清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素。 */ HTML结构： < div class="main">main < div class="col-1">col1< /div> < div class="col-2">col2< /div> < div class="clear-float">clear-float< /div> < /div>

main 我是包在外面的div

col1 我是第一列

col2 我是第二列

clear-float;我用来清除浮动（清除float）