DIV+CSS一行两列布局

核心提示：实现效果：div.main{width:500px;background:yellow;}.main .col-1{float:left;width:200px;height:300px;background:#eee;border:1px solid #ccc;}.main .

实现效果：
main 我是包在外面的divcol1 我是第一列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>

<style type="text/css">body{font-size:12px;}.main{width:800px;/* 总的宽度 */background:yellow;}.main .col-1{float:left;/* 这个是关键的地方 让col1往左浮动，这样它的后面（右边）就可以放置别的元素（别的元素：可以是div，图片，文字等） */width:300px;height:300px;background:#eee;border:1px solid #ccc;}.main .col-2{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的元素。 */</style>main 我是包在外面的divcol1 我是第一列col2 我是第二列clear-float;我用来清除浮动（清除float）