如何实现两边固定,中间自适应的三栏布局?

来源:互联网 发布:淘宝加工厂 编辑:程序博客网 时间:2024/05/02 02:18

       如何实现两边固定,中间自适应的三栏布局?

第一种办法:用传统的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>

1 0
原创粉丝点击