布局方案对比-优快云博客

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/121443661
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			html *{
				margin:0;
				padding:0;
			}
			.layout article div{
				min-height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 浮动解决方案 -->
		<section class="layout float">
			<style>
				.float .left-center-right{
					height:100px;
					margin-bottom: 20px;
				}
				.float .left-center-right>div{
				}
				.float .left-center-right .left{
					float:left;
					width: 300px;
					background:red;
				}
				.float .left-center-right .right{
					float:right;
					width: 300px;
					background:blue;
				}
				.float .left-center-right .center{
					background:yellow;
				}
				
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="right"></div>
				<div class="center">
					<h1>浮动解决方案</h1>
					1.这是布局绝对定位
					2.这是布局绝对定位
				</div>
			</article>
		</section>
		<!--绝对定位解决方案-->
		<section class="layout position">
			<style>
				.position .left-center-right{
					position: relative;
					height:100px;
				}
				.position .left-center-right>div{
					position: absolute;
				}
				.position .left-center-right .left{
					left:0;
					width: 300px;
					background:red;
				}
				.position .left-center-right .center{
					left:300px;
					right:300px;
					background:yellow;
				}
				.position .left-center-right .right{
					right:0;
					width: 300px;
					background:red;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>绝对定位解决方案</h1>
					1.这是布局绝对定位
					2.这是布局绝对定位
				</div>
				<div class="right"></div>
			</article>
		</section>
		<!--弹性布局解决方案-->
		<section class="layout flex">
			<style>
				.flex .left-center-right{
					display: flex;
					margin-top: 20px;
				}
				.flex .left-center-right .left{
					width: 300px;
					background:red;
				}
				.flex .left-center-right .center{
					flex:1;
					background:yellow;
				}
				.flex .left-center-right .right{
					width: 300px;
					background:red;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>弹性布局解决方案</h1>
					1.这是布局绝对定位
					2.这是布局绝对定位
				</div>
				<div class="right"></div>
			</article>
		</section>
		<!-- 表格布局 -->
		<section class="layout table">
			<style>
				.layout.table{
					margin-top: 30px;
					/* padding-top: 120px; */
				}
				.layout.table .left-center-right{
					display: table;
					width: 100%;
					height: 100px;;
				}
				.layout.table .left-center-right>div{
					display: table-cell;
				}
				.layout.table .left-center-right .left{
					width: 300px;
					background:red;
				}
				.layout.table .left-center-right .center{
					background:yellow;
				}
				.layout.table .left-center-right .right{
					width: 300px;
					background:green;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>table布局解决方案</h1>
					1.这是布局绝对定位
					2.这是布局绝对定位
				</div>
				<div class="right"></div>
			</article>
		</section>
		
		<!-- 网格布局 -->
		<section class="layout grid">
			<style>
				.layout.grid{
					margin-top: 20px;
					/* padding-top: 120px; */
				}
				.layout.grid .left-center-right{
					display: grid;
					width: 100%;
					grid-template-rows: 100px;
					grid-template-columns: 300px auto 300px;
				}
				.layout.grid .left-center-right .left{
					/* left:0; */
					/* width: 300px; */
					background:red;
				}
				.layout.grid .left-center-right .center{
					/* left:300px;
					right:300px; */
					background:yellow;
				}
				.layout.grid .left-center-right .right{
					/* right:0; */
					/* width: 300px; */
					background:green;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>网格布局解决方案</h1>
					1.这是布局绝对定位
					2.这是布局绝对定位
				</div>
				<div class="right"></div>
			</article>
		</section>
	</body>
</html>
HTML页面布局方式
