三栏布局的常见方案
要求:左右两栏宽度 200px,中间自适应。
本文主要介绍了以下四种三栏布局方案:
- flex 布局(CSS3)
- grid 布局(CSS3)
- 定位布局
- 浮动布局
- 浮动布局的扩展
1.三栏布局:左右两栏宽度 200px,中间自适应。
公共的 html 代码:
<div class="container">
<div class="left">左侧固定区域</div>
<div class="right">右侧固定区域</div>
<div class="main">中间自适应区域</div>
</div>
本文中我们 html 中父容器中的 div 的书写顺序是:左右中,所以 flex 布局与 grid 布局需要使用 order 属性
来进行特殊处理,平时开发时推荐 div 顺序直接写为左中右,则可省去 order 属性调整的步骤。
1.1 flex 布局
对 flex 布局不熟悉的读者,可以参阅我之前写的博客CSS3 弹性盒(flex)布局。
flex 布局方案实现起来非常简单,也是平时开发使用最多的方案。
order属性
定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
/* 公共样式代码 */
body,
html {
padding: 0;
margin: 0;
}
div {
height: 500px;
}
/*flex 布局核心代码*/
.container {
display: flex;
}
.left,
.right {
flex: 0 0 200px; /* flex-grow flex-shrink flex-basis*/
background: pink;
}
.left {
order: 1; /*定义项目的排列顺序*/
}
.right {
order: 3;
}
.main {
flex: 1 0 auto; /* flex-grow flex-shrink flex-basis*/
background: lightblue;
order: 2;
}
1.2 grid 布局
对 grid 布局不熟悉的读者,可以参阅MDN-grid。
grid 布局方案实现也很简单,但在平时开发使用 flex 布局就可以解决大部分问题,所以使用 grid 布局使用较少。
/* 公共样式代码 */
body,
html {
padding: 0;
margin: 0;
}
div {
height: 500px;
}
/*grid 布局核心代码*/
.container {
display: grid;
grid-template-columns: 200px auto 200px; /*每列宽度*/
}
.left,
.right {
background: pink;
}
.left {
order: 1; /*定义项目的排列顺序*/
}
.right {
order: 3;
}
.main {
background: lightblue;
order: 2;
}
1.3 定位布局
对定位布局不熟悉的读者,可以参阅MDN-position。
定位布局的大致思路就是:
- 子绝父相: 父容器设为相对定位,左右两栏设为绝对定位。
- 设置宽度:左右两栏宽度设为 200px;中间区域使用 margin 属性预留左右两栏的宽度,并使中间区域宽度自适应,将 margin 设为 0 200px。
- 设置偏移:左侧向左偏移,将 left 属性 设为 0;右侧向右偏移,将 right 属性 设为 0。
/* 公共样式代码 */
body,
html {
padding: 0;
margin: 0;
}
div {
height: 500px;
}
/* position + margin 方案核心代码 */
.container {
position: relative;
}
.left,
.right {
position: absolute;
top: 0;
background: pink;
width: 200px;
}
.left {
left: 0;
}
.right {
right: 0;
width: 200px;
}
.main {
margin: 0 200px;
background: lightblue;
}
1.4 浮动布局
对浮动布局不熟悉的读者,可以参阅MDN-float。
浮动布局的大致思路就是:
- 设置浮动:左侧向左浮动,将float 属性设为 left;右侧向右浮动,将 float 属性 设为 right。
- 设置宽度:左右两栏宽度设为 200px;中间区域使margin 属性预留左右两栏的宽度,并使中间区域宽度自适应,将 margin 设为 0 200px。
/* 公共样式代码 */
body,
html {
padding: 0;
margin: 0;
}
div {
height: 500px;
}
/* float + margin方案核心代码 */
.left,
.right {
width: 200px;
background: pink;
}
.left {
float: left;
}
.main {
margin: 0 200px;
background: lightblue;
}
.right {
float: right;
}
1.5 浮动布局的扩展
**扩展:**左右两栏宽度 200px,中间自适应,并且要求先加载中间后加载左右。
由于扩展题对flex 布局、grid 布局与定位布局三种方案影响不大,只需进行简单的改动。
所以扩展题只介绍了浮动布局,该类解决方案平时开发根本不会使用,读者凭兴趣看看即可。
html 代码:
<div class="container">
<div class="main-container">
<div class="main">中间自适应区域</div>
</div>
<div class="left">左侧固定区域</div>
<div class="right">右侧固定区域</div>
</div>
/* 公共样式代码 */
body,
html {
padding: 0;
margin: 0;
}
div {
height: 500px;
}
/* float + margin方案核心代码 */
.container > div {
float: left;
}
.left,
.right {
width: 200px;
background: pink;
}
.main-container {
width: 100%; /*撑满container容器的宽度*/
}
.main {
margin: 0 200px; /*预留给左右区域的宽度*/
background: lightblue;
}
.left {
margin-left: -100%; /*百分比是相对于container容器的宽度*/
}
.right {
margin-left: -200px;
}
结语
这是我目前所了解的知识面中最好的解答,当然也有可能存在一定的误区。
所以如果对本文存在疑惑,可以在评论区留言,我会及时回复的,欢迎大家指出文中的错误观点。
最后码字不易,觉得有帮助的朋友点赞、收藏、关注走一波。