CSSで2列レイアウトを実装する方法
方法: 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>
厳密に言えば、両方の要素がアダプティブであるという意味ではなく、上の固定幅が に変更されるだけです。子要素によって引き伸ばされます
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 レイアウト<!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>原理と欠点は上記の 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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7664
15
1393
52
1205
24
91
11
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
