html一行2列页面,DIV+CSS一行两列布局_html/css_WEB-ITnose

CSS代码：

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 >

效果：

Code

main 我是包在外面的div

col1 我是第一列

col2 我是第二列

clear-float;我用来清除浮动(清除float)

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网