码迷,mamicode.com
首页 > 其他好文 > 详细

三栏布局的三种方法(左右两栏固定宽度)

时间:2015-07-17 15:41:42      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

1、绝对定位

<body>
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
</body>

  

html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}

注意:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。然而,一般情况下,除非用户显示器分辨率宽度>=1600像素,否则用户不会把浏览器缩小到1000像素以下的

2、浮动配合负边距

<style>
     html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
</style>
<body>
    <div id="main">
	   <div id="body"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
</body>

  注意:中间部分必须在第一个。左右两边的固定栏位置随意

3、自身浮动

<style>
    html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
</style>

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

 注意:主体一定要在最后

 

下插曲:无意间看到的小技巧——

问:当容器宽度大于显示器最大分辨率时,如何使容器居中。如:容器宽度:1920,屏幕分辨率:1440.

答:容器{position:absolut;left:50%,margin-left:-960px}

 

三栏布局的三种方法(左右两栏固定宽度)

标签:

原文地址:http://www.cnblogs.com/mmlvj/p/4654557.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!