DIVCSS实现一行两列布局详细说明.docVIP

DIV+CSS一行两列布局 已有 433 次阅读 2008-5-9 14:48 实现效果： 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=mainmain div class=col-1col1 /div div class=col-2col2 /div div class=clear-floatclear-float /div /div ? ? ? style type=text/cssbody{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 div class=mainmain 我是包在外面的div?div class=col-1col1 我是第一列/div?div class=col-2col2 我是第二列/div?div class=clear-floatclear-float;我用来清除浮动（清除float）/div/div ?