首页 > web前端 > html教程 > DIV+CSS 一行两列布局_html/css_WEB-ITnose

DIV+CSS 一行两列布局_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:30:45
原创
1764 人浏览过

  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结构:

 

main
col1
col2
clear-float

 

效果:

 

Code


main 我是包在外面的div
  
col1 我是第一列

  
col2 我是第二列

  
clear-float;我用来清除浮动(清除float)

 

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板