首页 > 代码库 > 三栏布局
三栏布局
中栏固定宽度,左右两栏宽度自适应
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-width:620px;
}
#left{
float:left;
width:50%;
height:400px;
background:#ccc;
margin-left:-150px;
}
#right{
float:right;
width:50%;
height:400px;
background:#ccc;
margin-right:-150px;
}
#middle{
float:left;
width:300px;
height:400px;
background-color:#666;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
中栏自适应宽度,左右两栏宽度固定
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-width:620px;
}
#left{
float:left;
width:200px;
height:400px;
background:#ccc;
}
#right{
float:right;
width:200px;
height:400px;
background:#ccc;
}
#middle{
float:left;
width:100%;
margin-left:-400px;
height:400px;
background-color:#666;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
三栏布局