![DIVCSS实现一行两列布局详细说明.doc_第1页](http://file.renrendoc.com/FileRoot1/2019-2/2/8997c674-7626-4fb4-a598-6f9106a7c78d/8997c674-7626-4fb4-a598-6f9106a7c78d1.gif)
![DIVCSS实现一行两列布局详细说明.doc_第2页](http://file.renrendoc.com/FileRoot1/2019-2/2/8997c674-7626-4fb4-a598-6f9106a7c78d/8997c674-7626-4fb4-a598-6f9106a7c78d2.gif)
![DIVCSS实现一行两列布局详细说明.doc_第3页](http://file.renrendoc.com/FileRoot1/2019-2/2/8997c674-7626-4fb4-a598-6f9106a7c78d/8997c674-7626-4fb4-a598-6f9106a7c78d3.gif)
全文预览已结束
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
DIV+CSS一行两列布局已有 433 次阅读 2008-5-9 14:48 实现效果:main 我是包在外面的div col1 我是第一列col2 我是第二列clear-float;我用来清除浮动(清除float)以下是说明:CSS代码:.mainwidth:800px;/* 总的宽度 */background:red;.main .col1float:left;/* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */width:300px;height:300px;background:#eee;border:1px solid #ccc;.main .col2float:left;/* 这个是关键的地方 让col2也往左浮动,紧跟在col1的后面 */margin-left:5px;/* 让col2和col1之间有些间隔 */width:490px;height:300px;/* 给一个尺寸 可以随意*/background:#ddd;border:1px solid #ccc;.clear-floatclear:both/* 清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素。 */HTML结构:maincol1col2clear-floatbodyfont-size:12px;.mainwidth:800px;/* 总的宽度 */background:yellow;.main .col-1float:left;/* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */width:300px;height:300px;background:#eee;border:1px solid #ccc;.main .col-2float:left;/* 这个是关键的地方 让col2也往左浮动,紧跟在col1的后面 */margin-left:5px;/* 让col2和col1之间有些间隔 */width:490px;height:300px;/* 给一个尺寸 可以随意*/background:#ddd;border:1px solid #ccc;.clear-floatclear:both/* 清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素。 */main 我是
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 医学生职业生涯规划课心得体会5篇
- 医院停气的应急预案及流程
- 废化学试剂分箱清单
- 高二年级英语组工作计划5篇
- 幼儿中班认识数字1-5教案7篇
- 人教版高中英语选择性必修第二册UNIT3 Part 4 Writing练习含答案
- 校园小雷锋活动总结7篇
- 云南省双柏县达标名校2023-2024学年中考物理押题卷含解析
- 山东省泰安市泰山外国语校2024年中考三模英语试题含答案
- 教育与教学心得体会8篇
- GB 15979-2024一次性使用卫生用品卫生要求
- 卸料平台施工验收要求
- 小区公共设施使用满意度调查
- TB 10009-2016 铁路电力牵引供电设计规范
- 2020大气有害物质无组织排放卫生防护距离推导技术导则
- 教科版五年级上册科学期末测试卷及参考答案(完整版)
- 消防设备总代理合同
- 代理记账业务内部规范
- 学校体检服务投标方案(技术方案技术标)
- 工业设计与人工智能的结合
- 中医适宜技术临床应用意义
评论
0/150
提交评论