首页 > 代码库 > 三栏布局

三栏布局

中栏固定宽度,左右两栏宽度自适应

<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>

三栏布局