相対幅と絶対幅が競合する場合のdivソリューション 概要: 一般的に、絶対幅を使用する場合は px を使用し、相対幅を使用する場合は % を使用しますが、絶対幅と相対幅の両方を同時に使用する場合はどうすればよいでしょうか。 今日の内容を説明するために例を挙げてみましょう。 1. 画像の質問に答えてください 質問1は非常に簡単で、解決策もたくさんあるので、詳細には触れません。 質問 2 を分析すると、2 つの重要な要件があることがわかりました。 相対的な幅だけを気にするのであれば、非常に簡単です。左のグリッドの幅を 30% (たとえば) に設定し、右側の各グリッドの幅を 70% に設定するだけです。絶対的な幅だけを気にするのであれば、さらに簡単で、中央の距離を 10 ピクセルに設定するだけです。しかし、両方を同時に満たしたい場合はどうすればよいでしょうか? width: (inherit-10px)*30% と記述する必要がありますか? まず、一般的なボックスフレームワークを書き出します <!-- タイガーのコードワールド--> <!doctypehtml> <html> <ヘッド> <title>相対幅と絶対幅に関する議論</title> <メタ文字セット="utf-8"> <link rel="スタイルシート" href="style.css"> </head> <本文> <div id="top"> </div> <div class="wrapper"> <div id="左"> </div> <div id="right"> </div> </div> <div id="下"> </div> </本文> </html> 上部のコンテナと下部のコンテナの詳細については説明しません。真ん中の部分についてだけお話しします。 まず、相対幅と絶対幅の問題は同時に解決できないことは明らかです(1. この質問に関する限り 2. 訂正は大歓迎です) まず相対的な幅を解決しましょう: これは非常に単純で、左の幅は30%、右の幅は70%です #左{ 高さ: 300px; フロート: 左; 幅: 150ピクセル; } #右{ 高さ: 300px; 幅: 自動; 左マージン: 150px; } そうすれば問題はすぐに解決するのではないでしょうか? もちろん、境界線の問題への対処方法など、いくつかの細かい点にも注意を払う必要があります。これには、外側のコンテナーと内側のコンテナーの高さを調整する必要があり (差は 2 * border-width)、右側のコンテナーを左側に適合させるには、右側に別の div を配置する必要があります。 ボックス モデルは CSS レイアウトの基本的なスキルです。さまざまな変換に適用する前に、誰もがボックス モデルを深く理解する必要があります。この質問を完了するには、margin、padding(この質問では使用されませんが)、border、divの関係をよく理解している必要があります。今日は詳しくは話しませんので、次回時間があるときに話します。 参考までに、私のコードをすべて以下に貼り付けました。より良い解決策があれば、コメント欄で共有してください。 HTML: <!タイガーのコードワールド> <!doctypehtml> <html> <ヘッド> <title>CSS レイアウト演習</title> <メタ文字セット="utf-8"> <link rel="スタイルシート" href="style.css"> </head> <本文> <div id="top"> </div> <div class="wrapper"> <div id="左"> <div class="innerright"></div> <div class="inner"></div> </div> <div id="right"> <div class="inner"></div> </div> </div> <div id="下"> </div> </本文> </html> CS: ... /*タイガーのコードの世界*/ /*タイトルの幅は、境界線と余白のある幅なのか、境界線と余白のない幅なのか不明です。以下は境界線と余白のない幅をデフォルトとします*/ *{ マージン: 0px; パディング: 0px; 境界線の幅: 3px; 境界線のスタイル: solid; 境界線の色: 黒; } html{ マージン: 0; パディング: 0; 境界線の幅: 0; 幅: 100%; } 体{ マージン: 0; パディング: 0; 境界線の幅: 0; } #トップ{ マージン: 10px; 高さ: 150px; } .ラッパー{ マージン: 10px; 高さ: 300px; 幅: 継承; 境界線の幅: 0; } #左{ 高さ: 300px; 幅: 30%; フロート: 左; 境界線の幅: 0; } #左 .inner{ 高さ: 294px; 幅: 自動; 右マージン: 10px; } #左 .内右{ 高さ: 294px; 幅: 10px; フロート: 右; 境界線の幅: 0; 左マージン: 10px; } #右{ 高さ: 300px; 幅: 70%; フロート: 右; 境界線の幅: 0; } #右 .inner{ 高さ: 294px; 幅: 自動; } #底{ マージン: 10px; 高さ: 150px; } これで、HTML+CSS で相対幅と絶対幅が競合する場合の div 問題を解決する方法についての記事は終了です。HTML+CSS での相対幅と絶対幅の競合の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ~ 100 の範囲外の場合...
DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...
1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...
開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...
この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...
Shutdown.batファイルには次の文があります "%CATALINA_HOME%&q...
以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っ...
具体的なコードは次のとおりです。 <a href="#"> <...
目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...
UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異...
この記事では、reduce()、filter()、map()、every()、some()、spre...
目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...