码迷,mamicode.com
首页 > 其他好文 > 详细

三栏布局

时间:2014-09-18 22:13:14      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:style   color   ar   div   on   c   html   ad   ef   

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

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

三栏布局

标签:style   color   ar   div   on   c   html   ad   ef   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!