[CSSレイアウト例】6種類の適応的な2カラムレイアウトを実現するCSS
2022-02-03 21:46:50
html構造
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
方法1:フレックスレイアウト
.wrapper{
display:flex;
}
.left{
width:200px;
height:400px;
background:black;
}
.right{
flex:1;
height:400px;
background:red;
}
方法2:フロート
.left{
float:left;
width:200px;
height:400px;
background:black;
}
.right{
background:red;
height:400px;
}
方法3:BFC
.left{
width:200px;
height:400px;
float:left;
background:black;
}
.right{
overflow:hidden;
height:400px;
background:red;
}
方法4:絶対位置決め
.wrapper{
position:relative;
}
.left{
width:200px;
height:400px;
background:black;
}
.right{
position:absolute;
top:0;
left:200px;
right:0;
bottom:0;
background:red;
}
方法5:テーブルレイアウト
.wrapper{
display:table;
width:100%;
}
.left,.right{
display:table-cell;
height:400px
}
.left{
background:black;
}
.right{
background:red;
}
方法6:グリッドレイアウト
.wrapper{
display:grid;
width:100%;
height:400px;
grid-template-columns:200px auto;
}
.left{
background:black;
}
.right{
background:red;
}
適応2列レイアウトの6種類を実現するためのCSSのこの記事は、これに導入され、より関連するCSS適応2列レイアウトの内容は、スクリプトホーム以前の記事を検索したり、次の関連記事を閲覧し続け、私はあなたが将来的にスクリプトホームをよりサポートすることを願ってください!.
関連
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[CSSチュートリアル】ピュアCSSでロウソクの溶ける(水滴)を実現するサンプルコード
-
[css3]CSS3の画像ボーダーを学ぶための記事
-
[CSSチュートリアル]マウスをスライドさせてカードを浮かせるCSSの例
-
[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション
-
[CSSチュートリアル]css transform ページめくりアニメーションの記録
-
[CSSチュートリアル]CSS線形グラデーションの凹型矩形遷移の動的効果
-
[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード
-
[CSSチュートリアル】CSSでデータホットスポット効果を実現する方法