首页 > 代码库 > CSS 经典三列布局
CSS 经典三列布局
一 圣杯布局
1 html结构
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/css.css"></head><body> <div class="header">头部</div> <div class="container"> <div class="middle">中间</div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <div class="footer">底部</div></body></html>
2 css
*{padding: 0;margin: 0;list-style: none;}body{min-height: 700px;}.header,.footer{background: #ff9999;text-align: center;height: 50px;line-height: 50px;}.left,.middle,.right{ position: relative; float: left; min-height: 530px; line-height: 530px; text-align: center;}.container{ padding: 0 220px 0 200px; overflow: hidden;}.left{ margin-left: -100%;left: -200px; width: 200px; background-color: #99ffff;}.right{ margin-left: -220px; right: -220px; width: 220px; background: #ccff99;}.middle{ width: 100%; background: #ccffff; word-break: break-all;}.footer{ clear: both;}
二 双飞翼布局
1 html结构
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/sb.css"></head><body> <div class="header">header</div> <div class="middle"> <div class="middle-inner">middle</div> </div> <div class="left">left</div> <div class="right">right</div> <div class="footer">footer</div></body></html>
2 css
*{padding: 0px;margin: 0px;}.header,.footer{ height: 50px; line-height: 50px; background: #cf9999; border: 1px solid #333; text-align: center;}.left,.middle,.right{ float: left; min-height: 500px; line-height: 500px; text-align: center;}.left{ margin-left: -100%; width: 200px; background: #9999ff;}.right{ margin-left: -220px; width: 220px; background: #ccffff;}.middle{ width: 100%; }.middle-inner{ margin-left: 200px; margin-right: 220px; min-height: 500px; background-color: #ccff99; word-break: break-all;}.footer{clear: both;}
三 以上两种 经典布局以双飞翼为最佳，在此基础上进行各种变种，主要体现了浮动和margin负值的巧妙使用
CSS 经典三列布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。