實(shí)現(xiàn)效果：
main 我是包在外面的div col1 我是第一列 col2 我是第二列 clear-float;我用來(lái)清除浮動(dòng)（清除float）
以下是說(shuō)明：

CSS代碼：

.main{width:800px;/* 總的寬度 */
background:red;
}
.main .col1{
float:left;/* 這個(gè)是關(guān)鍵的地方 讓col1往左浮動(dòng)，這樣它的后面（右邊）就可以放置別的元素（別的元素：可以是div，圖片，文字等） */
width:300px;height:300px;
background:#eee;border:1px solid #ccc;
}
.main .col2{
float:left;/* 這個(gè)是關(guān)鍵的地方 讓col2也往左浮動(dòng)，緊跟在col1的后面 */
margin-left:5px;/* 讓col2和col1之間有些間隔 */
width:490px;height:300px;/* 給一個(gè)尺寸 可以隨意*/
background:#ddd;
border:1px solid #ccc;
}
.clear-float{clear:both}/* 清除col1和col2的float,否則main的高度會(huì)出錯(cuò) 沒有包住它里面的有float的元素。 */

HTML結(jié)構(gòu)：

< div class="main">main
< div class="col-1">col1< /div>
< div class="col-2">col2< /div>
< div class="clear-float">clear-float< /div>
< /div>

運(yùn)行代碼無(wú)著色模式復(fù)制打印?

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;/*?這個(gè)是關(guān)鍵的地方?讓col1往左浮動(dòng)，這樣它的后面（右邊）就可以放置別的元素（別的元素：可以是div，圖片，文字等）?*/ ??
9. width:300px;height:300px; ??
10. background:#eee;border:1px?solid?#ccc; ??
11. } ??
12. .main?.col-2{ ??
13. float:left;/*?這個(gè)是關(guān)鍵的地方?讓col2也往左浮動(dòng)，緊跟在col1的后面?*/ ??
14. margin-left:5px;/*?讓col2和col1之間有些間隔?*/ ??
15. width:490px;height:300px;/*?給一個(gè)尺寸?可以隨意*/ ??
16. background:#ddd; ??
17. border:1px?solid?#ccc; ??
18. } ??
19. .clear-float{clear:both}/*?清除col1和col2的float,否則main的高度會(huì)出錯(cuò)?沒有包住它里面的有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;我用來(lái)清除浮動(dòng)（清除float）</div>??
26. </div>??
27. ??

轉(zhuǎn)載于:https://www.cnblogs.com/cnyyl/archive/2007/08/12/852628.html

總結(jié)

以上是生活随笔為你收集整理的DIV+CSS一行两列布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。