ホームページ > 記事 > ウェブフロントエンド > CSSで2列レイアウトを実装する方法
CSSで2列レイアウトを実装する方法
- 青灯夜游オリジナル
- 2021-07-22 15:33:426105ブラウズ
方法: 1. 両方のボックス要素に「dislpay:inline-block」を設定します。 2. 両方のボックス要素をフロートに設定します。 3. 左側の固定幅要素をフロートにし、右側の要素をmargin-left. 値が固定幅要素の幅より大きい場合; 4. 浮動 BFC; 5. 絶対位置決め margin-left など。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
1. 2 列レイアウトとは何ですか?
2 列レイアウトには、左側の固定幅とアダプティブの 2 種類があります。 1 つは、両方の列がアダプティブであることです (つまり、左側の幅は子要素によって決定され、右側は残りのスペースを埋めます)。 CSSの面接質問は共通試験問題であり、フロントエンド開発エンジニアが身につけておくべきスキルでもありますので、その実装方法を以下に紹介します。
2. 左側の固定幅と右側の適応調整を実現するにはどうすればよいですか?
1. 二重の inline-block
原則: 両方の要素に dislpay:inline-block を設定します。 HTML スペースの影響のため、親要素のフォント サイズは 0 に設定する必要があり、右側のアダプティブ要素の幅は calc 関数を使用して計算されます。 2 つの要素の高さが異なる場合は、要素のvertical-align:top 調整を設定できます。
# 欠点: 親要素のフォントサイズが 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 class="box">
<div class="left">
<span>1234</span>
</div>
<div class="right">
<span>1234</span>
</div>
</div>
</body>
</html>
2. Double float
原則: 2 つの要素が float に設定され、右側のアダプティブ要素の幅が calc 関数を使用して計算されます
欠点: 親要素をフローティングからクリアする必要がある
<!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 class="box">
<div class="left">
<span>
123adadadddddddddddddddddddddddddddddddddddddddd
</span>
</div>
<div class="right"></div>
</div>
</body>
</html>
3. フローティング マージン
## 原則: 左側の固定幅要素はフローティング、右側の要素はフローティングです。 アダプティブ要素は、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 class="box">
<div class="left">
<p>1234</p>
</div>
<div class="right">
<p>1234</p>
</div>
</div>
</body>
</html>
4 をクリアする必要があります。浮動 BFC
原則: 親要素は overflow:hidden を設定し、左側の固定幅要素はフローティング、右側のアダプティブ要素は 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 class="box">
<div class="left">111111111111111111111111</div>
<div class="right">111111111111111111111111111111111111111111111</div>
</div>
<div class="right"></div>
</body>
</html>
# 原則: 親要素は相対的に配置され、左の要素は絶対的に配置され、右の適応要素は左マージンの値を固定幅要素の幅よりも大きく設定します
欠点: 親要素は相対位置に設定されます
#<!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 class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>#6.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 class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>## 未満ではサポートされません。 #3. 左側と右側の要素は両方ともアダプティブです
厳密に言えば、両方の要素がアダプティブであるという意味ではなく、上の固定幅が に変更されるだけです。子要素によって引き伸ばされます
1. Floating BFC
原則は、左側の要素の幅を除いて上記と同じです。は設定されておらず、子要素によってサポートされています2.table レイアウト
原則: 親要素は display:table であり、 left 要素は div でラップされます。div は display:table-cell、width :0.1% (保証された最小幅) に設定され、margin-right は左側の要素に内部的に設定され、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 class="parent">
<div class="box">
<div class="left">126545453dddddddd453453453</div>
</div>
<div class="right">12121</div>
</div>
</body>
</html>
3.flex レイアウト
原理と欠点は上記の flex レイアウトと同じです
4.gridレイアウト## 原則: 親要素は表示を設定します: Grid, Grid-template-columns:auto 1fr; (この属性は次のように定義します)列幅、auto キーワードは長さがブラウザ自体によって決定されることを示します。fr は相対的なサイズ単位であり、残りのスペースが均等に分割されることを示します) グリッドギャップ: 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 class="parent">
<div class="left">1111111111111111111111111</div>
<div class="right"></div>
</div>
</body>
</html>(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで2列レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。