方法: 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 サイトの他の関連記事を参照してください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
メモ帳++7.3.1
使いやすく無料のコードエディター
ホットトピック
7697
15164014139352128725122929