N methods of realizing two column layout with CSS

Time:2022-5-15

1、 What is a two column layout

Two column layouts are divided into two types, one is fixed width on the left and adaptive on the right, and the other is adaptive on both columns (that is, the width on the left is determined by sub elements, and the remaining space is supplemented on the right). The CSS interview questions belong to common questions and are also the skills that a front-end development engineer must master. The implementation methods will be introduced below.

2、 How to realize left fixed width and right adaptive?

1. Double inline block

Principle: dislpay: inline block is set for both elements. In order to eliminate the influence of HTML spaces, the font size of the parent element needs to be set to 0, and the width of the adaptive element on the right is calculated using the calc function. If the height of two elements is different, you can set vertical align: Top adjustment for the element.

Disadvantages: because the font size of the parent element is set to 0, the text in the child element will not be displayed


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   *{
			   padding: 0;
			   margin: 0;
		   }
			.box{
				height: 600px;
				width: 100%;
				font-size:0;
			}
			.left{
				display: inline-block;
				width: 100px;
				height: 200px;
				background-color: red;
				vertical-align: top;
				
			}
			.right{
				display: inline-block;
				width: calc(100% - 100px);
				height: 400px;
				background-color: blue;
				vertical-align: top;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>1234</span>
			</div>
			<div>
				<span>1234</span>
			</div>
		</div>
	</body>
</html>

2. Double floating

Principle: two elements are set to float, and the adaptive element width on the right is calculated by Calc function

Disadvantages: the parent element needs to clear the float


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;

			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				float: left;
				width: calc(100% - 100px);
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>
					123adadadddddddddddddddddddddddddddddddddddddddd
				</span>
			</div>
			<div></div>
		</div>
	</body>
</html>

Principle: the left fixed width element floats, and the right adaptive element can set the value of margin left to be greater than the width of the fixed width element

Disadvantages: the parent element needs to clear the float


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;

			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				margin-left: 100px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<p>1234</p>
			</div>
			<div>
				<p>1234</p>
			</div>
		</div>
	</body>
</html>

4. Floating + BFC

Principle: the parent element is set to overflow: hidden, the left fixed width element is floating, and the right adaptive element is set to overflow: Auto to create BFC

Disadvantages: if the content of the left element exceeds the set width, it will overlap on the right element


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				overflow: hidden;
			}
			.left{
				float: left;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				overflow: auto;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>111111111111111111111111</div>
			<div>111111111111111111111111111111111111111111111</div>
		</div>
		<div></div>
	</body>
</html>

5.absolute+margin-left

Principle: the parent element is relatively positioned, the left element is absolutely positioned, and the margin left value of the right adaptive element is greater than the width of the fixed width element

Disadvantages: relative positioning is set for the parent element


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				position: relative;
			}
			.left{
				position: absolute;
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				margin-left: 100px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

6. Flex layout

Principle: the parent element is set to display: flex, and the adaptive element is set to flex: 1

Disadvantages: there is a compatibility problem, which is not supported under ie10


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				height: 600px;
				width: 100%;
				display: flex;
			}
			.left{
				width: 100px;
				height: 200px;
				background-color: red;
			}
			.right{
				flex: 1;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

3、 Both left and right elements are adaptive

Strictly speaking, the two elements are not adaptive, but the fixed width above is changed to be supported by sub elements

1. Floating + BFC

The principle is the same as the above, except that the width of the left element is not set and is supported by the child element

2. Table layout

Principle: the parent element is display: table. The periphery of the left element is wrapped with a Div. this div sets display: table cell, width: 0.1% (ensure the minimum width). Margin right is set inside the left element and display: table cell is set on the right element.

Disadvantages: IE7 and below are not supported. When display: table, padding is invalid, the line height attribute of the parent element is invalid, and when display: table cell, margin is invalid.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display: table;
				width: 100%;
				
			}
			.box{
				display: table-cell;
				width: 0.1%;
			}
			.left{
				margin-right: 20px;
				background-color: red;
				height: 200px;
			}    
			.right{
				display: table-cell;
				background-color: blue;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>126545453dddddddd453453453</div>
			</div>
			<div>12121</div>
		</div>
	</body>
</html>

3. Flex layout

The principle and disadvantages are the same as the flex layout above

4. Grid layout

Principle: the parent element sets display: grid, grid template columns: Auto 1fr; (this attribute defines the column width, and the auto keyword indicates that the length is determined by the browser itself. FR is a relative size unit, indicating that the remaining space is divided equally.) grid gap: 20px (row spacing)

Disadvantages: compatibility is too poor, ie11 does not support, Google 57 or above can be


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				display:grid;
				grid-template-columns:auto 1fr;
				grid-gap:20px
			}  
			.left{
				background-color: red;
				height: 200px;
			}
			.right{
				height:300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>1111111111111111111111111</div>
			<div></div>
		</div>
	</body>
</html>

This is the end of this article about the n methods of CSS to realize two column layout. For more information about CSS two column layout, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!