首页 > 代码库 > 圣杯布局（目的就是为了实现自适应分辨率）和等高布局（目的就是实现左右两边的高度等高，并且高度有内容撑开）
圣杯布局（目的就是为了实现自适应分辨率）和等高布局（目的就是实现左右两边的高度等高，并且高度有内容撑开）
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>圣杯布局</title><style>body{margin:0;}.center{height:600px;background:#f60;margin:0 200px;}.left{width:200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}.right{width:200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}</style></head><body><div class="center"></div><div class="left"></div><div class="right"></div></body></html>圣杯布局（目的就是为了实现自适应分辨率）
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>等高布局（目的就是实现左右两边的高度等高，并且高度有内容撑开）</title><style>body{margin:0;}.wrap{ width:900px;margin:0 auto;overflow:hidden;}.left{width:200px;background:Red;float:left;padding-bottom:10000px;margin-bottom:-10000px;}.right{width:700px;background:blue;float:right;padding-bottom:10000px;margin-bottom:-10000px;}</style></head><body><div class="wrap"> <div class="left"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div> <div class="right"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div></div></body></html>等高布局（目的就是实现左右两边的高度等高，并且高度有内容撑开）
圣杯布局（目的就是为了实现自适应分辨率）和等高布局（目的就是实现左右两边的高度等高，并且高度有内容撑开）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。