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

相対幅と絶対幅が競合する場合の 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を使用して画像認識アプリを実装する方法

推薦する

MySQLトリガーについて深く理解するための記事

目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ~ 100 の範囲外の場合...

HTML DOM入門_PowerNode Javaアカデミー

DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...

CSS 手法を使用してモジュール性を実現する例

1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

MySQLデータベースはMMM高可用性クラスタアーキテクチャを実装します

コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...

Linux での MySQL 5.6.24 (バ​​イナリ) 自動インストール スクリプト

この記事では、Linux環境でのmysql5.6.24自動インストールスクリプトコードを参考までに共...

CSSに基づいてマウス入力の方向を決定する

以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っ...

CSSアニメーションに基づくSVGボタンのサンプルコード

具体的なコードは次のとおりです。 <a href="#"> <...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

フローチャートとUIフローの違い

UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異...

ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spre...

JS と Nodejs におけるイベント駆動型開発についての簡単な説明

目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...