左右侧边栏固定宽,中间宽度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html, body{height: 100%;}
/*定位布局*/
.container, .left, .right, .center {
height: 100%;
}
.container{
position: relative;
}
.left, .right{
top: 0;
position: absolute;
width: 200px;
}
.left{
left: 0;
background-color: #f60;
}
.right{
right: 0;
background-color: #e30;
}
.center{
background-color: #fde560;
padding: 10px 10px 0 10px;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">左右栏固定宽、中间栏宽度自适应</div>
<div class="right"></div>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读