CSS三欄自適應佈局，左中右，上中下

時間 2019-11-30

標籤 css 自適應佈局中下欄目 CSS 简体版

原文原文鏈接

本文對能夠實現三欄佈局的方法進行了整理css

左右固定寬度，中間自適應(5種方法)

1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法 html

<html>
<head>
	<meta charset="utf-8">
	<title>css佈局全解</title>
	<style type="text/css">
		html *{
			padding: 0;
			margin: 0
		}
		.layout article div{
			min-height: 50px;
		}

		.layout{
			margin-top: 10px;
		}


	</style>
</head>
<body>
	<!-- 1.float 方法-->
	<section class="layout float">
		<style media="screen">
			.layout.float .right{
				float: right;
				width: 300px;
				background: red;
			}
			.layout.float .left{
				float: left;
				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>
			</div>
		</article>
	</section>

	<!-- 2.絕對定位寫法 -->
	<section class="layout absolute">
		<style>
			.layout.absolute .left-center-right div{
				position: absolute;
			}
			.layout.absolute .left{
				width: 300px;
				left: 0;
				background: blue;
			}
			.layout.absolute .center{
				left: 300px;
				right: 300px;
				background: yellow;
			}
			.layout.absolute .right{
				width: 300px;
				right: 0px;
				background: red;
			}
			
			
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>絕對定位解決方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 3.flex佈局 -->
	<section class="layout flexbox">
		<style>
			.layout.flexbox{
				margin-top: 70px;
			}
			.layout.flexbox .left-center-right{
				display: flex;
			}
			.layout.flexbox .left{
				width: 300px;
				background: blue;
			}
			.layout.flexbox .center{
				flex:1;
				background: yellow;
			}
			.layout.flexbox .right{
				width: 300px;
				background: red;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>flex定位解決方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 4.表格佈局 -->
	<section class="layout table">
		<style>
			.layout.table .left-center-right{
				display: table;
				width: 100%;
				height: 50px;
			}
			.layout.table .left-center-right div{
				display: table-cell;
			}
			.layout.table .left{
				width: 300px;
				background: blue;
			}
			.layout.table .center{
				background: yellow;
			}
			.layout.table .right{
				width: 300px;
				background: red;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>表格定位解決方案</h1>
			</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: 50px;
				grid-template-columns: 300px auto 300px;
			}
			.layout.grid .left{
				background: blue;
			}
			.layout.grid .center{
				background: yellow;
			}
			.layout.grid .right{
				background: red;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>網格定位解決方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>
</body>
</html>
複製代碼

上下固定高度，中間自適應(4種方法)

1.absolute方法 2.flexbox方法 3.table方法 4.grid方法bash

<html>
<head>
	<meta charset="utf-8">
	<title>css上下高度不變，中間自適應佈局</title>
	<style type="text/css">
		html *{
			padding: 0;
			margin: 0;
		}
		#wrapper div{
			width: 150px;
		}
		#wrapper div.one,.two,.three,.four{
			width: 150px;
			height: 100%;
			display: inline-block;
			float: left;
		}
		.one,.two,.three{
			background: green;
		}
		
	</style>
</head>
<body>
	<div id="wrapper">
		<!-- 1.absolute方法 -->
		<div class="one">
			<style type="text/css">
				.layout.absolute div{
					position: absolute;
					float: left;
				}
				.layout.absolute .top{
					top: 0;
					height: 100px;
					background: red;
				}
				.layout.absolute .bottom{
					bottom: 0;
					height: 100px;
					background: blue;
					float: left;
				}
				.layout.absolute .center{
					top: 100px;
					bottom: 100px;
					background: yellow;
					overflow: auto;
				}

			</style>
			<article class="layout absolute">
				<div class="top"></div>
				<div class="center">
					<h1>absolute中間自適應元素</h1>
				</div>
				<div class="bottom"></div>
			</article> 
		</div>

		<!-- 2.flex方法 -->
		<div class="two">
			
			<style type="text/css">
				.two{
					margin-left:10px;
				}
				.layout.flexbox{
					display: flex;
					width: 100%;
					height: 100%;
					flex-direction:column;
				}
				.layout.flexbox .top{
					height: 100px;						
					background: red;
				}
				.layout.flexbox .center{
					flex:1;
					background: yellow;
				}
				.layout.flexbox .bottom{
					height: 100px;
					background: blue;
				}
			</style>
			<article class="layout flexbox">
				<div class="top"></div>
				<div class="center">
					<h1>flexbox中間自適應元素</h1>
				</div>
				<div class="bottom"></div>
			</article> 
		</div>

		<!-- 3.表格方法 -->
		<div class="three">
			<style type="text/css">
					.three{
						margin-left: 10px;
					}
					.layout.table{
						display: table;
						height: 100%;
						width: 100%;
					}
					.layout.table div{
						display: table-row;
						/*特別注意*/
						display: inline-block; 
					}
					.layout.table .top{
						height: 100px;			
						background: red;
					}
					.layout.table .center{
						height:calc(100% - 200px);
						background: yellow;
					}
					.layout.table .bottom{
						height: 100px;
						background: blue;
					}
				</style>
				<article class="layout table">
					<div class="top"></div>
					<div class="center">
						<h1>table方法中間自適應元素</h1>
					</div>
					<div class="bottom"></div>
				</article>
		</div>
		
		<!-- 4.grid方法 -->      
		<div class="four">
			<style>
				.four{
					margin-left: 10px;
				}
				.layout.grid{
					display: grid;
					height: 100%;
					grid-template-rows: 100px auto 100px;
					grid-template-columns: 150px;
				}
				.layout.grid .top{			
					background: red;
				}
				.layout.grid .center{
					background: yellow;
				}
				.layout.grid .bottom{
					background: blue;
				}
			</style>
			<article class="layout grid">
				<div class="top"></div>
				<div class="center">
					<h1>grid方法中間自適應元素</h1>
				</div>
				<div class="bottom"></div>
			</article>
		</div>
	</div>
</body>
</html>
複製代碼

看似簡單的題目，仍是要多練習增長熟練度。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。