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プロジェクトが完了した後にプロジェクトを最適化する方法の例
目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...
JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...
Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...
すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...
最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...
目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...
1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...
react-routerでは、コンポーネント内のジャンプは<Link>で使用できます。し...
イメージは hub.docker.com に保存できますが、ネットワーク速度が比較的遅いです。内部環...
この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...
今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...
目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...
HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...
この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...