五种实现三栏布局的方式，左右宽度固定中间自适应（一）——面试常考点

最新推荐文章于 2021-02-23 16:42:58 发布

FrontJS

最新推荐文章于 2021-02-23 16:42:58 发布

阅读量571

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/TSeven37/article/details/83010322

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Layout</title>
	<style type="text/css">
		html,*{
			margin:0;
			padding: 0; 
		}
		section{
			margin-top: 20px;
		}
		/*浮动定位*/
		.layout-float div{
			min-height: 100px;
		}
		.layout-float .left{
			width: 300px;
			float: left;
			background-color: red;
		}
		.layout-float .right{
			width: 300px;
			float:right;
			background-color: green;
		}
		.layout-float .center{
			background-color: yellow;
		}
		/*绝对定位*/
		.layout-absolute{
			position: relative;
		}
		.layout-absolute div{
			min-height: 100px;
			position: absolute;
		}
		.layout-absolute .left{
			width: 300px;
			left: 0;
			background-color: red;
		}
		.layout-absolute .right{
			width: 300px;
			right: 0;
			background-color: green;
		}
		.layout-absolute .center{
			/*通过左右定位 自适应宽度*/
			left: 300px;
			right: 300px;
			background-color: yellow;
		}
		/*flex*/
		.layout-flex{
			display: flex;
			margin-top: 140px;
		}
		.layout-flex div{
			min-height: 100px;
		}
		.layout-flex .left{
			width: 300px;
			background-color: red;
		}
		.layout-flex .right{
			width: 300px;
			background-color: green;
		}
		.layout-flex .center{
			flex:1;
			background-color: yellow;
		}
		/*table*/
		.layout-table{
			width: 100%;
			display: table;
		}
		.layout-table div{
			display: table-cell;
			height: 100px;
		}
		.layout-table .left{
			width: 300px;
			background-color: red;
		}
		.layout-table .right{
			width: 300px;
			background-color: green;
		}
		.layout-table .center{
			background-color: yellow;
		}
		/*grid*/
		.layout-grid{
			display: grid;
			grid-template-rows: 100px; /*行高*/
			grid-template-columns: 300px auto 300px;/*三栏 宽度*/		
		}
		.layout-grid .left{
			background-color: red;
		}
		.layout-grid .right{
			background-color: green;
		}
		.layout-grid .center{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<section>
		<article class="layout-float">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
					<h1>浮动解决方案</h1>
					三栏布局
					1、左边左浮动
					2、右边由浮动
					3、中间自适应
			</div>
		</article>
	</section>
	<section>
		<article class="layout-absolute">
			<div class="left"></div>
			<div class="center">
					<h1>绝对定位解决方案</h1>
					1、左边left为0
					2、右边right为0
					3、中间left为300px
			</div>
			<div class="right"></div>	
		</article>
	</section>
	<section>
		<article class="layout-flex">
			<div class="left"></div>
			<div class="center">
					<h1>flex解决方案</h1>
					flex实现三栏布局
			</div>
			<div class="right"></div>	
		</article>
	</section>
	<section>
		<article class="layout-table">
			<div class="left"></div>
			<div class="center">
					<h1>table解决方案</h1>
					table实现三栏布局
			</div>
			<div class="right"></div>	
		</article>
	</section>
	<section>
		<article class="layout-grid">
			<div class="left"></div>
			<div class="center">
					<h1>网格解决方案</h1>
					网格实现三栏布局
			</div>
			<div class="right"></div>	
		</article>
	</section>
</body>
</html>

FrontJS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五种实现三栏布局的方式，左右宽度固定中间自适应（一）——面试常考点

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Layout&lt;/title&gt; &lt;style type="text/css"&gt; html,*{ margin:0; padding: 0; } section{ margin-top: 20px; } /*
复制链接

扫一扫