正文

一行两列的CSS设置代码2007-04-20 14:44:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/wangsdong/25032.html

分享到:

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

 

阅读(3886) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册