本文介绍了一种使用传统 position 属性实现两边固定、中间自适应的三栏布局的方法。通过绝对定位将左右两栏固定在页面两侧，中间栏通过设置左右内边距实现自适应填充。
如何实现两边固定，中间自适应的三栏布局？
第一种办法：用传统的position实现
<!Doctype>
<meta charset="utf-8">
<html>
<head>
<title>三栏布局</title>
<style>
html,body{ margin: 0px;width: 100%; }
h1{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
</style>
</head>
<body>
<h1>三栏自适应布局</h1>
<div id = "left">左边</div>
<div id = "right">右边</div>
<div id = "center">中间</div>
</body>
</html>
扫一扫
1598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
