1. 两栏布局,左边定宽,右边自适应
//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>
#left{
float: left;
width: 200px;
background: green;
}
#right{
overflow: hidden;
background: red;
}
2. 三栏布局
圣杯布局和双飞翼布局:实现三列布局,中间内容宽度自适应,两边内容宽度固定。
预览最终布局效果:
区别如下:
DOM结构不同,相对于圣杯,双飞翼为中间单独添加了一个容器,以便margin为左右留白。
圣杯用padding
来为左右留白,双飞翼用margin
来为左右留白。
圣杯
结合浮动和定位
来使左右定位,双飞翼
则直接使用浮动
来定位。
1. 圣杯布局
HTML出现顺序:main、left、right。先载入主体,再加载侧边栏。
<div class="container">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<style>
.container{ padding: 0 200px 0 300px; }
.main{ width: 100%; height: 200px; float: left; background:yellow; }
.left{ width: 300px; height: 200px; float: left; background: red;
margin-left: -100%; position:relative; left: -300px; }
.right{ width: 200px; height: 200px; float:left; background: green;
margin-left: -200%; position: relative; left: -200px; }
2.双飞翼布局
HTML出现顺序:main、left、right。main中单独加了一个容器。
<div class="container">
<div class="main"><div class="wrap">Main</div></div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<style>
.main{ width: 100%; height: 200px; float: left; background: yellow; }
.wrap{ padding: 0 200px 0 300px }
.left{ width: 300px; height: 200px; background: red; float: left; margin-left: -100%; }
.right{ width:200px; height:200px; background:green; float:left; margin-left:-200px; }
<style>