一行两列的CSS设置代码

<
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>


<
div 
class="
main"
>
main 
我是包在外面的div
 
<
div 
class="
col-1"
>
col1 
我是第一列<
/div>

 
<
div 
class="
col-2"
>
col2 
我是第二列<
/div>

 
<
div 
class="
clear-float"
>
clear-float
我用来清除浮动（清除float）<
/div>

<
/div>