相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション

概要: 一般的に、絶対幅を使用する場合は px を使用し、相対幅を使用する場合は % を使用しますが、絶対幅と相対幅の両方を同時に使用する場合はどうすればよいでしょうか。

今日の内容を説明するために例を挙げてみましょう。

1. 画像の質問に答えてください
2. 幅が画面の幅と等しくなり、レイアウトが 1 とほぼ同じになるようなソリューションを提供するようにしてください。ブラウザの幅をどのように調整しても、中央のレイアウトの相対的な幅が変わらず、グリッド間の間隔が 10 px であることを確認します。

質問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. 訂正は大歓迎です）
次に、問題を分割します。まず相対幅を解決してから絶対幅を解決します。または、まず絶対幅を解決してから相対幅を解決します。この質問に関する限り、前者の方が簡単です。問題をどのように「分割」するのでしょうか? ——もちろんコンテナ div です!

まず相対的な幅を解決しましょう:
A と C を結合し、相対的な幅を使用して B で記述します。

これは非常に単純で、左の幅は30％、右の幅は70％です
では、左側のコンテナのレイアウトをどのように解決すればよいでしょうか?
まず、次のことを考えてみましょう。左側に固定幅のグリッドがあり、右側に可変幅のグリッドがあるコンテナーを作成できますか?もちろん、これはナビゲーションバーです。これは非常に簡単です。以下に貼り付ける方法を見つけました。

＃左{
    高さ: 300px;
    フロート: 左;
    幅: 150ピクセル;
}

＃右{
    高さ: 300px;
    幅: 自動;
    左マージン: 150px;
}

そうすれば問題はすぐに解決するのではないでしょうか?
したがって、次に相対と絶対の間で競合が発生した場合は、強力なツールとして div を必ず使用してください。

もちろん、境界線の問題への対処方法など、いくつかの細かい点にも注意を払う必要があります。これには、外側のコンテナーと内側のコンテナーの高さを調整する必要があり (差は 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 をよろしくお願いいたします。

<<: モバイルページで縦画面を強制する方法

>>: Reactを使用して画像認識アプリを実装する方法