html+css三栏布局-浮动方法
2014-10-24 22:40
78 查看
第一种处理方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三栏布局-浮动方法</title> <style type="text/css"> * { margin:0; padding:0;} #wrap { background: grey; padding-left: 200px; padding-right: 300px; min-height: 1000px; } #main { float:left; width:100%; height: 1000px; background: blue;} #left, #right { position:relative;} #left { width:200px; background:yellow;height:800px;float:left; margin-left:-200px;left:-100%;} #right { width:300px; background:red;height:400px;float:right; margin-right:-300px;} </style> </head> <body> <div id="wrap"> <div id="main"> <p>content</p> </div> <div id="left"> <p>left</p> </div> <div id="right"> <p>right</p> </div> </div> </body> </html>
第二种处理方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三栏布局-浮动方法</title> <style type="text/css"> * { margin:0; padding:0;} #wrap { background: grey; padding-left: 200px; padding-right: 300px; min-height: 1000px; } #main { float:right; width:100%; height: 1000px; background: blue;} #left, #right { position:relative;} #left { width:200px; background:yellow;height:800px;float:left; margin-left:-200px;} #right { width:300px; background:red;height:400px;float:right; margin-right:-300px;right:-100%;} </style> </head> <body> <div id="wrap"> <div id="main"> <p>content</p> </div> <div id="left"> </div> <div id="right"> </div> </div> </body> </html>
相关文章推荐
- div+css布局清楚浮动方法
- 页面布局中常用的清除浮动的方法
- CSS分栏布局的方法:绝对定位和浮动
- div浮动居中 单div盒子和三列布局中间div盒子浮动居中方法
- H5学习之12(html中的使用浮动布局带来的问题和解决方法)
- h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)
- CSS清除因为浮动布局导致父元素height值为0的三种方法
- 图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)
- 浮动布局的方法(总结)
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)
- CSS分栏布局的方法:绝对定位和浮动
- 页面布局中常用的清除浮动的方法
- 前端布局常见IE6 bug的解决方法,清除浮动的几种方法以及各自的优缺点
- 一个老外弄的Clearing floats(清除浮动的方法)
- 使用js实现基于可视布局信息的网页噪音去除的测试方法
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- 用CSS的float和clear创建三栏液态布局的方法
- CSS网页布局入门教程8:三列浮动中间列宽度自适应