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

效果：

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

[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有