CSS--三列布局--两边固定，中间⾃适应--⽅法实例原⽂⽹址：
简介
本⽂⽤⽰例介绍CSS三列布局的⽅案。
三列布局，即：左，中，右。有两种⽅案：1.两边固定，中间⾃适应；2.中间固定，两边⾃适应。本⽂介绍第1种⽅案。
两边固定，中间⾃适应，⼀共有如下⼏种⽅案：
1. flex布局（推荐）
2. ⽹格布局（grid)
3. 浮动布局（float）
4. 圣杯布局
5. 双飞翼布局
6. 表格布局（table）（不推荐）
7. 绝对定位布局（不推荐）
想要达到的效果：
下边所有的⽅案的结果都跟上图⼀样。
⽅案1：flex(推荐)
简介
flex是css3提供的⼀种新的布局⽅式，这种布局的产⽣就是为了实现⾃适应布局，它是随着移动互联⽹时代产⽣⽽引进的。        本⽅案是实现⾃适应布局的最佳⽅案。
⽗元素设置display: flex之后，⼦元素float，vertical-align，clear失效
优点
1. 简单
2. 维护性好
缺点
1. 不兼容旧浏览器
⽰例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/        }
.container>div {
height: 100px;
}
.
container {
display: flex;
}
.aside-left {
width: 300px;
background-color: #a9ff29;
}
.middle {
flex: 1;
background-color: #ffb91b;
}
.
aside-right {
width: 200px;
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="middle">中间</div>
<div class="aside-right">右侧</div>
</div>
</body>
</html>
⽅案2：⽹格(grid)
简介
⽹格布局是⽐较新的东西，这个布局是新的css标准下的特性。在响应式布局⼤⾏其道的移动互联⽹时代，bootstrap之类的是对栅格化布局框架⾮常流⾏，⽽⽹格布局，就是对栅格布局的标准化实现。
优点
1. 简单、清晰
缺点
1. 不兼容旧浏览器。（因为是新CSS标准的特性）
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/
}
.container {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 200px;
}
.aside-left {
background-color: #a9ff29;
}
.middle {
background-color: #ffb91b;
}
.aside-right {
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="middle">中间</div>
<div class="aside-right">右侧</div>
</div>
</body>
</html>
⽅案3：浮动(float)
优点
1. 兼容旧浏览器
缺点
1. 主体内容需要放到最后，当页⾯元素较多时候对开发不友好。⽰例
必须把中间的元素写到最后，即：左、右、中。
代码
<!doctype html>
css固定定位<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置，默认为8px*/
}
.container>div {
height: 100px;
}
.aside-left {
float: left;
width: 300px;
background-color: #a9ff29;
}
.middle {
background-color: #ffb91b;
}
.aside-right {
float: right;
width: 200px;
background-color: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左侧</div>
<div class="aside-right">右侧</div>
<!-- 必须放到最后 -->
<div class="middle">中间</div>
</div>
</body>
</html>
结果
错误⽰例
如果按照正常的顺序写元素：左、中、右，将不会达到预期。
代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。