当前位置：网站首页>Page layout - three column layout solution

Page layout - three column layout solution

2022-07-19 01:31:00 【Xu xiaoshuo】

When designing front-end pages , Often left 、 in 、 The layout of the right three columns , Often the left and right columns are a fixed value , And the middle column is adaptive , In the face of such a situation , What kind of design scheme should be used ？ This article will introduce five common solutions , These five methods can be selected according to the specific situation , Next, let's introduce one by one .

First let's take a look at the renderings ：

Here is the common code part ：

<head>
		<meta charset="utf-8">
		<title> There are five ways to solve the three column layout </title>
		<style type="text/css">
			html * {
				padding: 0;
				margin: 0;
			}

			.layout {
				margin-top: 20px;
			}

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

One . Floating solution

<!--  Floating solution  -->
		<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> Floating solution </h1>
					1. This is the middle part of the three column layout 
				</div>
			</div>
		</div>

The first way is to use float Attribute handle left 、 The right two columns are respectively set to float , The middle part is adaptive , Solve the three column layout .

advantage ： Good compatibility , Clear the floating and other elements around the floating , Compatibility is OK .

shortcoming ： After setting the float , Out of the document stream , If you can't handle it well , It will bring a lot of problems .

Two 、 Absolute positioning solution

<!--  Absolute positioning solution  -->
		<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> Absolute positioning solution </h1>
					1. This is the middle part of the three column layout 
				</div>
				<div class="right"></div>
			</div>
		</div>

The second way is to use absolute positioning , Use position:absolute attribute , To three div Absolute positioning , Then use the location attribute , Solve the three column layout .

advantage ： quick , It's not easy to have problems

shortcoming ： Itself out of the document stream , This causes the child elements to follow out of the document stream , therefore , This leads to poor effectiveness of absolute positioning and usable rows .

3、 ... and 、flexbox Solution

<!-- flexbox Solution  -->
		<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 Solution </h1>
					1. This is the middle part of the three column layout 
				</div>
				<div class="right"></div>
			</div>
		</div>

The third way is to use the style of elastic layout , yes CSS3 New properties display:flex, To the left 、 Set the width in the right two columns , Use... In the middle bar flex Set elastic layout , Solve the three column distribution .CSS3 Layout introduced in , In order to solve the problems of the above two methods , It's a perfect way , Especially for mobile terminals .

Four 、 Table layout solution

<!--  Table layout  -->
		<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> Table layout solution </h1>
					1. This is the middle part of the three column layout 
				</div>
				<div class="right"></div>
			</div>
		</div>

The fourth way is to use table layout , Think of three columns as three columns in a row , Set the height of the table , Three div Set up display:table-cell attribute , Solve the three column layout .

advantage ： Table layout is applicable in many scenarios , Its compatibility is also very good , When flex When you can't solve the problem , Table layout is not a way .

shortcoming ： There are some historical criticisms , And that is , When one of the cells exceeds the height , Other cells will also be adjusted .

5、 ... and 、 Grid layout solution

<!--  Grid layout  -->
		<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> Grid layout solution </h1>
					1. This is the middle part of the three column layout 
				</div>
				<div class="right"></div>
			</div>
		</div>

The fifth way is to use the new hot spots in recent years , Divide the page into grid styles , Set several rows and columns , Use auto The variable is for the middle column adaptation , Grid layout can make code simpler , Easy to implement logic .

The above is the five ways to solve the three column distribution mentioned in this article , Each method has its own advantages and disadvantages , Different schemes can be selected according to specific design requirements .

原网站

版权声明
本文为[Xu xiaoshuo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170002571339.html