上一篇
下一篇
Div+Css布局实例：一行两列布局
日期:2009-09-09作者:woniu
前面发过《两列右列宽度自适应的布局》，和《div+css三栏自适应宽度布局实例》。今天发个比较简单的也比较常用的，一行两列固定宽度布局。
css代码
Example Source Code
.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结构
Example Source Code
< div class="main">main
< div class="col-1">col1< /div>
< div class="col-2">col2< /div>
< div class="clear-float">clear-float< /div>
< /div>
运行预览效果
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
css代码
Example Source Code .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结构
Example Source Code < div class="main">main
< div class="col-1">col1< /div>
< div class="col-2">col2< /div>
< div class="clear-float">clear-float< /div>
< /div>
运行预览效果
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
文章来自: 
引用通告: 
Tags: 评论: 2 | 引用: 0 | 查看次数: -
回复
good[2011-12-13 07:53 PM | 
]发表评论