当前位置：网站首页>页面布局——三栏布局解决方式

页面布局——三栏布局解决方式

2022-07-17 00:05:00 【徐小硕】

在前端页面设计的时候，经常会出现左、中、右三栏布局的情况，往往左右两栏是一个固定值，而中间一栏是自适应，在面对这样的情况下，应该使用什么样的设计方案呢？本篇文章会介绍五种常用的解决方式，这五种方式可以根据具体的情况进行选择，接下来就逐一介绍。

首先我们先来看一下效果图：

这里是公用的代码部分：

<head>
		<meta charset="utf-8">
		<title>五种方式解决三栏布局</title>
		<style type="text/css">
			html * {
				padding: 0;
				margin: 0;
			}

			.layout {
				margin-top: 20px;
			}

			.layout div {
				min-height: 100px;
			}
		</style>
</head>

一.浮动解决方式

<!-- 浮动解决方式 -->
		<div class="layout float">
			<style type="text/css">
				.layout.float .left{
					float: left;
					width: 300px;
					background: red;
				}
				.layout.float .right{
					float: right;
					width: 300px;
					background:red;
				}
				.layout.float .center{
					background: yellow;
				}
			</style>
			<div class="left-right-center">
				<div class="left"></div>
				<div class="right"></div>
				<div class="center">
					<h1>浮动解决方式</h1>
					1.这是三栏布局的正中间部分
				</div>
			</div>
		</div>

方式一是利用float属性把左、右两栏分别设置浮动，中间部分自适应，解决三栏布局。

优点：兼容性比较好，把清除浮动和其他浮动周边的元素处理好的话，兼容性还是可以的。

缺点：设置浮动后，脱离了文档流，处理不好的话，会带来很多问题。

二、绝对定位解决方式

<!-- 绝对定位解决方式 -->
		<div class="layout absolute">
			<style type="text/css">
				.layout.absolute .left-right-center>div{
					position: absolute;
				}
				.layout.absolute .left{
					left: 0;
					width: 300px;
					background: red;
				}
				.layout.absolute .center{
					left: 300px;
					right: 300px;
					background: yellow;
				}
				.layout.absolute .right{
					right: 0;
					width: 300px;
					background: red;
				}
			</style>
			<div class="left-right-center">
				<div class="left"></div>
				<div class="center">
					<h1>绝对定位解决方式</h1>
					1.这是三栏布局的正中间部分
				</div>
				<div class="right"></div>
			</div>
		</div>

方式二是使用绝对定位的方式，使用position:absolute属性，对三个div进行绝对定位，然后分别使用位置属性，解决三栏布局。

优点：快捷，不容易出问题

缺点：本身脱离了文档流，就会导致子元素跟着脱离文档流，因此，导致绝对定位的有效性和可使用行比较差。

三、flexbox解决方式

<!-- flexbox解决方式 -->
		<div class="layout flexbox">
			<style type="text/css">
				.layout.flexbox .left-right-center{
					display: flex;
				}
				.layout.flexbox .left{
					width: 300px;
					background: red;
				}
				.layout.flexbox .center{
					flex: 1;
					background: yellow;
				}
				.layout.flexbox .right{
					width: 300px;
					background: red;
				}
			</style>
			<div class="left-right-center">
				<div class="left"></div>
				<div class="center">
					<h1>flexbox解决方式</h1>
					1.这是三栏布局的正中间部分
				</div>
				<div class="right"></div>
			</div>
		</div>

方式三是使用弹性布局的样式，是CSS3新增的属性display:flex，给左、右两栏设置宽度，中间栏使用flex设置弹性布局，解决三栏分布。CSS3中推出的布局，就是为了解决上述两种方式不足而出现的，算是比较完美的一种方式，尤其是对于移动端。

四、表格布局解决

<!-- 表格布局方式 -->
		<div class="layout table">
			<style type="text/css">
				.layout.table .left-right-center{
					width: 100%;
					display: table;
					height: 100px;
				}
				.layout.table .left-right-center>div{
					display: table-cell;
				}
				.layout.table .left{
					width: 300px;
					background: red;
				}
				.layout.table .center{
					background: yellow;
				}
				.layout.table .right{
					width: 300px;
					background: red;
				}
			</style>
			<div class="left-right-center">
				<div class="left"></div>
				<div class="center">
					<h1>表格布局解决方式</h1>
					1.这是三栏布局的正中间部分
				</div>
				<div class="right"></div>
			</div>
		</div>

方式四是利用表格布局，把三栏看成一行的三列，设置表格的高度，三个div设置display:table-cell属性，解决三栏布局。

优点：表格布局在很多场景都很适用，它的兼容性也是非常好的，当flex解决不了问题的时候，表格布局未尝不是一种方式。

缺点：本身存在一些历史诟病，还有就是，当其中一个单元格高度超出的时候，其他单元格也会跟着调整。

五、网格布局解决方式

<!-- 网格布局方式 -->
		<div class="layout grid">
			<style type="text/css">
				.layout.grid .left-right-center{
					width: 100%;
					display: grid;
					grid-template-rows: 100px;
					grid-template-columns: 300px auto 300px; 
				}
				.layout.grid .left{
					background: red;
				}
				.layout.grid .center{
					background: yellow;
				}
				.layout.grid .right{
					background: red;
				}
			</style>
			<div class="left-right-center">
				<div class="left"></div>
				<div class="center">
					<h1>网格布局解决方式</h1>
					1.这是三栏布局的正中间部分
				</div>
				<div class="right"></div>
			</div>
		</div>

方式五是使用这几年的新热点，把页面分割成一个个网格样式，设置几行几列，使用auto变量是为了中间栏自适应，网格布局可以使代码更加简单，方便实现逻辑。

以上就是本篇文章所讲的五种方式来解决三栏分布的的情况，每种方式有各自的优缺点，可以根据具体的设计要求选择不同的方案。

原网站

版权声明
本文为[徐小硕]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_40601005/article/details/108141665