[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド

2022-01-21 06:44:18

I. 2カラムレイアウトとは

2カラムレイアウトは、左側が固定幅、右側が適応幅のものと、2カラムが適応幅（つまり、子要素の幅の左側で残りのスペースの右側を決定して補う）のものに分かれる。これはcssの面接質問でもよくある質問で、フロントエンドの開発エンジニアが必ず習得しなければならないスキルなので、以下に紹介します。

第二に、固定幅の左側には、適応の右側はどのように達成するために？

1. ダブルインラインブロック

原理：両要素ともdislpay:inline-blockとし、htmlスペースの影響をなくすため、親要素のfont-sizeを0にする必要があります。右の適応要素の幅はcalc関数で計算されます。2つの要素の高さが同じでない場合は、vertical-align:topを設定して調整することができます。

デメリット親要素でfont-sizeを0にしているため、子要素内のテキストは表示されない

<!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. ダブルフロート

原理：2つの要素をfloatに設定し、右の適応的な要素の幅をcalc関数で計算する

デメリット：親要素が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>
					123adadadddddddddddddddddddddddddddddddddddddddddddddddddddddddd
				</span>
			</div>
			<div></div>
		</div>
	</body>
</html>

原則：左固定幅要素はフロート、右適応要素はmargin-leftを固定幅要素の幅より大きな値に設定する

デメリット：親要素が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.フロート＋BFC

原理：親要素にoverflow:hidden、左固定幅要素にfloat、右適応要素にoverflow:autoを設定してBFC化

デメリット：設定した幅を超えると、左の要素の内容が右の要素に重なってしまうこと

<!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>11111111111111111111111</div>
			<div>1111111111111111111111111111111111111111111111111111</div>
		</div>
		<div></div>
	</body>
</html>

5.absolute+margin-left

原則。親要素は相対位置、左要素は絶対位置、右適応要素はmargin-leftを固定幅要素の幅より大きな値に設定する。

デメリット：親要素が相対的に配置される

<!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. フレックスレイアウト

原理：親要素はdisplay:flex、アダプティブ要素はflex:1に設定

欠点：互換性の問題があり、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>

第三に、左右の要素ともアダプティブであること

厳密に言うと、両方の要素がアダプティブであるということではなく、上記の固定幅の要素が、代わりに子要素によって支えられているというだけなのです

1. フロート＋BFC

原理は上記と同じですが、left要素の幅が設定されておらず、子要素に突っ張られているのが特徴です

2. テーブルレイアウト

原則：親要素display:table、左要素をdivで囲む、divはdisplay:table-cell、width:0.1%（最小幅確保）、左要素はmargin-right inside、右要素はdisplay:table-cellを設定する。

欠点：IE7以下では未対応、display:tableのときpaddingは無効、親要素のline-heightプロパティは無効、display:table-cellのときmarginは無効です。

<!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.フレックスレイアウト

上記フレックスレイアウトと同じ原理・デメリット

4.グリッドレイアウト

原則：親要素に display:grid, grid-template-columns:auto 1fr; （この属性は列幅を定義し、auto キーワードはブラウザ自身が長さを決定することを意味します。 fr は相対サイズ単位で、等分割を行うための残りのスペースを示します） grid-gap:20px （行間隔）

デメリット：互換性が低すぎる、IE11がサポートされていない、Google 57以上のみ可能です。

<!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>111111111111111111111111</div>
			<div></div>
		</div>
	</body>
</html>

CSSのこの記事は、これを導入する方法のN種類の2列のレイアウトを実現するために、より関連するCSS 2列のレイアウトの内容は、以前の記事のスクリプトホームを検索したり、次の関連記事を閲覧し続け、私はあなたがより多くのスクリプトホームをサポートすることを願ってください！.