首页 > 代码库 > 圣杯布局(三栏布局)
圣杯布局(三栏布局)
圣杯布局也就是:左右固定宽度,中间自适应的布局样式
HTML布局:
注意:一定是中间部分写在最上面
<header><h4>header内容</h4></header> <div class="container"> <div class="middle"><h4>中间弹性</h4></div> <div class="left"><h4>左边栏</h4></div> <div class="right"><h4>右边栏</h4></div> </div> <footer><h4>内容区</h4></footer>
css样式:
.container{ height: 200px; overflow: hidden; } .middle{ width: 100%; height: 200px; background: mediumaquamarine; float: left; } .left{ width: 200px; height: 200px; background: navajowhite; float: left; } .right{ width: 200px; height: 200px; background: lightblue; float: left; }
此时的效果是这样的:
之后再给.container添加样式:
padding: 0 200px;
再给.left添加样式:
margin-left:-100%;
再给.right添加样式:
margin-left:-200px;
此时的效果为:
之后再给.left定位:
position:relation;
left:-200px;
给.right定位:
position:relation;
right:-200px;
此时的效果为:
圣杯布局(三栏布局)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。