CSS三栏布局(4种方法)
2020-02-12 本文已影响0人
凯凯frank
要求：垂直三栏布局，左右两栏宽度固定，中间自适应。
方法1：浮动
思路：三栏全部左浮动，中间元素width用calc计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
html,body{ height: 100%; }
.left-panel{
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right-panel{
float: left;
width: 100px;
height: 100%;
background-color: yellow;
border-left: 1px solid red;
border-right: 1px solid red;
}
.main-panel{
float: left;
height: 100%;
width: calc(100% - 300px);
background-color: #00a2ea;
}
</style>
</head>
<body>
<div class="left-panel">left</div>
<div class="main-panel">main</div>
<div class="right-panel">right</div>
</body>
</html>
方法2：浮动+普通布局
思路：左边容器左浮动，右边容器右浮动，中间元素不浮动,设置margin。此方法要求右边元素放在中间元素前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
html,body{ height: 100%; }
.left-panel{
float: left;
width: 200px;
height: 100%;
background-color: gray;
}
.right-panel{
float: right;
width: 100px;
height: 100%;
background-color: yellow;
}
.main-panel{
height: 100%;
background-color: #00a2ea;
border-left: 1px solid red;
border-right: 1px solid red;
margin-left: 200px;
margin-right: 100px;
}
</style>
</head>
<body>
<div class="left-panel">left</div>
<div class="right-panel">right</div>
<div class="main-panel">main</div>
</body>
</html>
方法3：绝对定位
思路：左边容器靠左绝对定位，宽度固定，右边容器靠右绝对定位，宽度固定。中间容器设置margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
html,body{ height: 100%; }
.left-panel{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background-color: gray;
}
.right-panel{
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 100%;
background-color: yellow;
}
.main-panel{
height: 100%;
margin-left: 200px;
margin-right: 100px;
background-color: #00a2ea;
border-left: 1px solid red;
border-right: 1px solid red;
}
</style>
</head>
<body>
<div class="left-panel">left</div>
<div class="main-panel">main</div>
<div class="right-panel">right</div>
</body>
</html>
方法四：flex布局
思路：父容器flex布局，左右两个子容器固定宽度，中间的容器设置flex-grow:1;填充容器剩余的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
html,body{ height: 100%; }
.container{
display: flex;
height: 100%;
}
.left-panel{
width: 200px;
background-color: gray;
}
.right-panel{
width: 100px;
background-color: yellow;
}
.main-panel{
flex-grow: 1;
background-color: #00a2ea;
border-left: 1px solid red;
border-right: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">left</div>
<div class="main-panel">main</div>
<div class="right-panel">right</div>
</div>
</body>
</html>
