三栏布局的几种方式
Posted 森森森0w0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局的几种方式相关的知识，希望对你有一定的参考价值。
1.流体布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*左右浮动，中间margin或者overflow*/
/*缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。*/
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 100px;
margin-right: 200px;
/*或者overflow: hidden;或者auto*/
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
2.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*要点：父元素设置margin左右，main宽度100%，然后left和right都设置margin-left左移到同一排*/
.container {
margin-left: 100px;
margin-right: 200px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: red;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;/*左移100%,使left和main在同一行*/
position: relative;
left: -100px;/*左移100px，与container的margin-left相对应。使元素响应地靠左排列*/
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;/*左移自身宽度，使right和main在同一行*/
position: relative;
right: -200px;/*右移200px，与container的margin-right相对应。使元素响应地靠右排列*/
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div><!--先写主体内容，优先渲染-->
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*要点：全部都浮动，然后margin-left位移到同一排*/
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 100px;
margin-right: 200px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<div class="main"></div><!--先写主体内容，优先渲染-->
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
4.flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*缺点：新技术要考虑浏览器兼容*/
.container {
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;/*排最左*/
flex-basis: 200px;/*分配空间*/
height: 300px;
background-color: blue;
}
.right {
flex-basis: 100px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
5.绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
position: relative;
}
.main {
height: 300px;
margin: 0 100px;
background-color: green;
}
.left {
position: absolute;
width: 100px;
height: 300px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 300px;
background-color: blue;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
6.table布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*缺点：无法设置栏间距，也无法优先加载内容*/
.container {
display: table;
width: 100%;
}
.left,
.main,
.right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.main {
background-color: blue;
}
.right {
width: 100px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
以上是关于三栏布局的几种方式的主要内容，如果未能解决你的问题，请参考以下文章
CSS创建三栏布局（两侧宽度固定，中间宽度自适应）的几种方法
CSS创建三栏布局（两侧宽度固定，中间宽度自适应）的几种方法