三栏布局

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

<style>
*{
margin:0;
padding:0;
}
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-620px;
}

#left{
float:left;
50%;
height:400px;
background:#ccc;
margin-left:-150px;
}
#right{
float:right;
50%;
height:400px;
background:#ccc;
margin-right:-150px;
}
#middle{
float:left;
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-620px;
}

#left{
float:left;
200px;
height:400px;
background:#ccc;

}
#right{
float:right;
200px;
height:400px;
background:#ccc;

}
#middle{
margin-left:200px;

margin-right:200px;
height:400px;
background-color:#666;
}

</style>

</head>

<body>
<div id="left"></div>
<div id="right"></div>

<div id="middle"></div>

</body>
</html>

原文地址:https://www.cnblogs.com/qinxuemei/p/3980095.html