三栏布局的三种方法（左右两栏固定宽度）

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30585437

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mmlvj/p/4654557.html

版权

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}

转载于:https://www.cnblogs.com/mmlvj/p/4654557.html