左右两栏布局
实现页面两栏布局最简单的就是左右两栏定宽加浮动,这也是对于新手常见的布局方式,并不是说这样布局有多差劲,缺点一箩筐,凡是要依据实际情况而定,有时候那样布局也是最佳的,简单粗暴。这里主要说下实现两栏自适应布局的几种方式。
1.左右两栏向左浮动,左边设置相对定位和margin-right负值
#left{ position: relative; float: left; margin-right: -100%; width: 200px; height: 400px; background: orange; } #right{ float: left; width: 100%; height: 400px; background-color: blue; }
<div class="container"> <div id="left">左边</div> <div id="right">右边</div> </div>
2.左栏浮动,右栏触发BFC,有关触发BFC的多种方式,这里就不详细说明了,常见的有,display:inline-block | table-cell | table-caption ; float:left | right;等等....
#left1{ float: left; width: 300px; height: 500px; background-color: yellow; } #right1{ overflow: hidden; /*触发BFC方式之一*/ height: 500px; background-color: #777; }
实现三栏自适应布局
这里主要针对圣杯布局和双飞翼布局做简单阐述,,已经了解的童鞋可以略过啦。。。
圣杯布局(名字看起来好厉害的样子...),这种方式的缺点就是受外部最小宽度的限制,原因在父级加了左右padding值,左右两栏相对定位,用了负的left和right.
.container{ padding-left: 200px; padding-right: 300px; min-width:600px; overflow: hidden; } #main-page,#left-page,#right-page{ float: left; height: 300px; } #main-page{ width: 100%; min-width: 100px; background-color: #000; } #left-page{ position: relative; margin-left: -100%; left: -200px; width: 200px; background-color: yellow; } #right-page{ position: relative; margin-left: -300px; right: -300px; width: 300px; background-color: green; }
<div class="container"> <!-- 中间放置最前面 --> <div id="main-page"> </div> <div id="left-page"> </div> <div id="right-page"> </div> </div>
双飞翼布局
其实这个跟圣杯布局有点类似,也是目前用的比较多的一种,主要区别在于中间主体部分外部包裹了一个div,main-page放主体内容,让后添加左右margin值.
<div class="container clearfix"> <!-- 中间放置最前面 --> <div id="main-wrap"> <div id="main-page1"> </div> </div> <div id="left-page1"> </div> <div id="right-page1"> </div> </div>
/*双飞翼*/ #main-wrap,#left-page1,#right-page1{ float: left; height: 300px; } #main-wrap{ width: 100%; } #main-page1{ margin-right: 300px; margin-left: 200px; height: 100%; background-color: red; } #left-page1{ margin-left: -100%; width: 200px; background-color: yellow; } #right-page1{ margin-left: -300px; width: 300px; background-color: green; }