DIV+CSS一行兩列布局

實現效果：

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>

運行代碼無著色模式複製列印?

1. <style type="text/css">  
2. body{font-size:12px;}   
3.   
4. .main{width:800px;/* 總的寬度 */   
5. background:yellow;   
6. }   
7. .main .col-1{   
8. float:left;/* 這個是關鍵的地方 讓col1往左浮動，這樣它的後面（右邊）就可以放置別的元素（別的元素：可以是div，圖片，文字等） */   
9. width:300px;height:300px;   
10. background:#eee;border:1px solid #ccc;   
11. }   
12. .main .col-2{   
13. float:left;/* 這個是關鍵的地方 讓col2也往左浮動，緊跟在col1的後面 */   
14. margin-left:5px;/* 讓col2和col1之間有些間隔 */   
15. width:490px;height:300px;/* 給一個尺寸 可以隨意*/   
16. background:#ddd;   
17. border:1px solid #ccc;   
18. }   
19. .clear-float{clear:both}/* 清除col1和col2的float,否則main的高度會出錯 沒有包住它裡面的有float的元素。 */   
20. </style>  
21.   
22. <div class="main">main 我是包在外面的div   
23.     <div class="col-1">col1 我是第一列</div>  
24.     <div class="col-2">col2 我是第二列</div>  
25.     <div class="clear-float">clear-float;我用來清除浮動（清除float）</div>  
26. </div>  
27.