三栏布局解决方案

最新推荐文章于 2024-06-29 00:10:00 发布

小新我是小白

最新推荐文章于 2024-06-29 00:10:00 发布

阅读量175

点赞数

分类专栏： css 文章标签：三栏布局 html

本文链接：https://blog.csdn.net/lxkll/article/details/88200478

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。

假设高度已知，请写出三栏布局，其左栏、右栏宽度为300px，中间自适应。

解决方案：浮动、绝对定位、Flex布局、表格布局、网格布局

1.浮动布局

优缺点：使用浮动元素会脱离文档流，会产生一些问题。但是兼容性较好。

    <section class="layout float">
		<style media="screen">
			.layout.float .left{
				float: left;
				width: 300px;
				background: red;
			}
			.layout.float .right{
				float: right;
				width: 300px;
				background: blue;
			}
			.layout.float .center{
				background: yellow;
			}
		</style>
		<article class="left-right-center">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
				1.这是中间部分
			</div>
		</article>
	</section>

效果如图所示：

2.绝对定位

优缺点：快捷，布局脱离文档流，之后的子元素也需要脱离文档流

    <!-- 绝对定位解决方案 -->
	<section class="layout absolute">
		<style>
			.layout.absolute .left-center-right>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: 0px;
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>绝对定位解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
			
		</article>
	</section>

效果如图所示：

3.flex布局

优缺点：为了解决上述两种方式的不足css3里新出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。
felxbox的缺点就是不能兼容IE8及以下浏览器。

    <!-- flexbox解决方案 -->
	<section class="layout flexbox">
		<style>
			/*将容器声明为flex布局*/
			.layout.flexbox .left-center-right{
				display: flex;
			}
			.layout.flexbox .left{
				width: 300px;
				background: red;
			}
			.layout.flexbox .center{
				flex: 1; /* 中间自适应原理 flex：1 */
				background: yellow;
			}
			.layout.flexbox .right{
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>flexbox解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

4.表格布局

优缺点：在很多场景中，表格布局还是很适用的。三栏布局用表格布局很容易实现，表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。但是当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。

    <!-- 表格布局解决方案 -->
	<section class="layout table">
		<style>
			.layout.table .left-center-right{
				width: 100%;
				display: table;
				height: 100px;
			}
			.layout.table .left-center-right>div{
				display: table-cell;
			}
			.layout.table .left{
				width: 300px;
				background: red;
			}
			.layout.table .center{
				background: yellow;
			}
			.layout.table .right{
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>表格布局解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

5.网格布局

优缺点：网格布局也是新出的一种布局方式，也是人不容易想到的一种方式。

    <!-- 网格布局解决方案 -->
	<section class="layout grid">
		<style>
			/*将容器声明为网格布局*/
			.layout.grid .left-center-right{
				display: grid;
				width: 100%;
				grid-template-rows: 100px; /*行高设置为100px*/
				grid-template-columns: 300px auto 300px; /*3列，左侧300px右侧300px 中间自动*/
			}
			.layout.grid .left{
				background: red;
			}
			.layout.grid .center{
				background: yellow;
			}
			.layout.grid .right{
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>网格布局解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Layout</title>
	<style media="screen">
		html *{
			padding: 0;
			margin: 0;
		}
		.layout{
			margin-top: 20px;
		}
		.layout article div{
			min-height: 100px; /*假设高度已知*/
		}
	</style>
</head>
<body>
	<!-- 浮动解决方案 -->
	<section class="layout float">
		<style media="screen">
			.layout.float .left{
				float: left;
				width: 300px;
				background: red;
			}
			.layout.float .right{
				float: right;
				width: 300px;
				background: blue;
			}
			.layout.float .center{
				background: yellow;
			}
		</style>
		<article class="left-right-center">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
				1.这是中间部分
			</div>
		</article>
	</section>

	<!-- 绝对定位解决方案 -->
	<section class="layout absolute">
		<style>
			.layout.absolute .left-center-right>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: 0px;
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>绝对定位解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>
	
	<!-- flexbox解决方案 -->
	<section class="layout flexbox">
		<style>
			.layout.flexbox {
				/* 否则会被绝对定位布局挡住 */
				margin-top: 140px;
			}
			/*将容器声明为flex布局*/
			.layout.flexbox .left-center-right{
				display: flex;
			}
			.layout.flexbox .left{
				width: 300px;
				background: red;
			}
			.layout.flexbox .center{
				flex: 1; /* 中间自适应原理 flex：1 */
				background: yellow;
			}
			.layout.flexbox .right{
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>flexbox解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 表格布局解决方案 -->
	<section class="layout table">
		<style>
			.layout.table .left-center-right{
				width: 100%;
				display: table;
				height: 100px;
			}
			.layout.table .left-center-right>div{
				display: table-cell;
			}
			.layout.table .left{
				width: 300px;
				background: red;
			}
			.layout.table .center{
				background: yellow;
			}
			.layout.table .right{
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>表格布局解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 网格布局解决方案 -->
	<section class="layout grid">
		<style>
			/*将容器声明为网格布局*/
			.layout.grid .left-center-right{
				display: grid;
				width: 100%;
				grid-template-rows: 100px; /*行高设置为100px*/
				grid-template-columns: 300px auto 300px; /*左侧300px右侧300px 中间自动*/
			}
			.layout.grid .left{
				background: red;
			}
			.layout.grid .center{
				background: yellow;
			}
			.layout.grid .right{
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>网格布局解决方案</h2>
				1.这是中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>
</body>
</html>

效果图如下所示：