HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)
|
HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。 実装1:
<スタイル>
本文、html{パディング:0; マージン:0;}
// CSS の配置に従って、フローティングまたは絶対配置を使用して、左側のブロック要素を通常のドキュメントフローから外し、右側のブロック要素と並べて配置できるようにします div:nth-of-type(1){
float: left; //フローティングを使用// position: absolute; //絶対配置を使用// top: 0;
// 左: 0;
幅: 300ピクセル;
高さ: 200px;
背景: 赤;
}
// [ブロックレベル要素はデフォルトで親要素の幅に合わせて自動的に埋められ、1行を占めます]
//現在: 右ブロック要素の幅 = 親要素の幅 div:nth-of-type(2){
// margin-left を左のブロック要素の幅に設定します。
左マージン: 300px;
// 現在: 右ブロック要素の幅 = 親要素の幅 - margin-left
高さ: 220px;
背景: 青;
}
</スタイル>
<html>
<div>div1</div>
<div>div2</div>
</html> 1) margin-leftを設定する前に
2) margin-leftを設定した後
実装2:
<スタイル>
本文、html{パディング:0; マージン:0;}
// CSS の配置に従って、フローティングまたは絶対配置を使用して、ブロック要素を通常のドキュメントフローの左側に配置します div:nth-of-type(1){
float: left; //フローティングを使用// position: absolute; //絶対配置を使用// top: 0;
// 左: 0;
幅: 300ピクセル;
高さ: 200px;
背景: 赤;
}
// FC は通常の (通常の) ドキュメント フロー、書式設定コンテキスト、ページ内のレンダリング領域であり、一連のレンダリング仕様を持ちます。 BFC はブロックフォーマットコンテキストです。
// BFCブロックレベルフォーマットコンテキストを使用して、分離された独立したコンテナを作成します div:nth-of-type(2){
// オーバーフロー値を非表示に変更し、BFC をトリガーします
オーバーフロー: 非表示;
高さ: 220px;
背景: 青;
}
</スタイル>
<html>
<div>div1</div>
<div>div2</div>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Vueプロジェクトが完了した後にプロジェクトを最適化する方法の例
推薦する
CSS3 変換によって子要素の固定位置を絶対位置に変更する方法
この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...
mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)
目次1. インストールパッケージ（64ビット）をダウンロードする2. MySQLデータベースをインス...
mysql5.6 以前のデータベースで json をクエリする方法
MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...
アプレットにおけるwx.getUserProfileインターフェースの具体的な使用
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法
最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...
Dockerコンテナ監視とログ管理の実装プロセス分析
Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...
MySQL サービスとデータベース管理
目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...
Vue3 トランジションアニメーションの落とし穴記録について
目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...
MySQLの大規模テーブル最適化ソリューションについての簡単な説明
背景Alibaba Cloud RDS for MySQL（MySQL バージョン 5.7）データベ...
Alibaba Cloud に Docker をインストールする際の問題と解決策
質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...
React で遅延読み込みを使用して最初の画面の読み込み時間を短縮する方法
目次使用インストールルーティングでどのように使用しますか?読み込み速度の比較最近、中間およびバックエ...
MySQLの文字列インターセプト関連関数の概要
この記事では、MySQL の文字列インターセプト関連の機能を紹介します。具体的な内容は以下のとおりで...
ティックアニメーション効果を作成するための svg+css または js
以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...
Debian ベースの Linux システム ソフトウェア インストール コマンドの詳細な説明 (推奨)
Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...
MySQL マスタースレーブレプリケーションの実装手順
目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...