両端の CSS レイアウトのサンプルコード (親の負のマージンを使用)

両端の CSS レイアウトのサンプルコード (親の負のマージンを使用)

最近、開発中に両端が揃ったレイアウトに遭遇しました。レイアウトはパーセンテージに基づいていました。以前はフレックスレイアウトを使用していましたが、両端にフレックスレイアウトを使用すると、さまざまなバグが発生していました。例えば、以下のように動的に生成される場合、3列以上であれば、両側に以下のリストが分散されます。
解決はできるものの、やはり通常の CSS を使ってレイアウトする方法を見てみたいと思います。私がこれを書いたからです。

オンラインでいくつかのチュートリアルを見つけましたが、それらはすべて操作の幅が固定されていました。それをパーセンテージ形式に変更して簡単に記録しました。
まず、CSS

<スタイル>
        * {
            パディング: 0px;
            マージン: 0px;
            ボックスのサイズ: 境界線ボックス;
        }
        
        .max-box {
            最大幅: 1200px;
            マージン: 0px 自動;
        }
        
        。箱 {
            オーバーフロー: 非表示;
            幅: calc(100% + 20px);
            左マージン: -10px;
        }
        
        .インナー{
            高さ: 100px;
            境界線: 実線 1px 赤;
            フロート: 左;
            左マージン: 10px;
            幅: calc(((100% - 20px) - 10px * 3) / 4);
        }
        
        .max-box2 {
            最大幅: 1200px;
            マージン: 50px 自動;
            境界線: 実線 1px 赤;
            高さ: 200px;
        }
    </スタイル>

次にHTMLへ

 <div class="max-box2">

    </div>
    <div class="max-box">
        <div class="box">
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
        </div>
    </div>

これらを HTML に記述すると、その効果を確認できます。
下記の通り

ここに画像の説明を挿入

最後に、式をまとめてみましょう

x = 10px; つまり、必要な間隔 y = 4 つまり、必要な行数 親: width: calc(100% + (x * 2));
子: 幅: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

要約する

CSS レイアウト - 両端レイアウト (親の負のマージンを使用) に関するこの記事はこれで終わりです。CSS レイアウトの親の負のマージンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  Linux netstatコマンドの詳細な説明

>>:  JavaScript排他的思考の具体的な実装

推薦する

Docker を使用して Django プロジェクトをデプロイする方法の例

また、Dockerを使用してDjangoプロジェクトをデプロイするのも非常に簡単です。とても良いです...

JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

目次オブジェクトプロトタイプの値()オブジェクトプロトタイプtoString()シンボル.toPri...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

MySQLデータ移行の概要

目次序文: 1. データ移行について2. 移行計画と留意点要約:序文:日常業務では、テーブル、データ...

Mysqlのインポートとエクスポート時に発生する問題の解決

背景すべての業務を Docker の運用管理に移行してから、一連の落とし穴に遭遇しましたが、今回は ...

MySQLクエリは、フィールドが数値とカンマではないことを指定します。

コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...

ハイパーリンクアイコンの仕様: 記事の読みやすさを向上

1. ハイパーリンクアイコンの仕様とは?<br />ハイパーリンクアイコンの仕様は、「C...

vite+vue3+element-plus プロジェクトをビルドする手順

viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...

ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...

Dockerコンテナの自動終了を停止する方法の詳細な説明

この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...

Docker クリーンアップ環境操作

丁寧に掃除を始めましょう!未使用ボリュームの一覧docker ボリューム ls -qf dangli...

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

mysqlを使用して、URLから返されたhttp GETリクエストデータを記録します。

ビジネスシナリオの要件と実装ロジックの分析ビジネスでは、HTTP GET を使用してデータを要求する...