CSSは複数の要素をボックスの両端に揃える効果を実現します

CSSは複数の要素をボックスの両端に揃える効果を実現します

要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウトの --justify-content: space-between を使用すると簡単に実現できます。ただし、いくつかのシナリオでは互換性などを考慮する必要があり、フレックスレイアウトをあきらめなければなりません。したがって、同じ効果を実現したい場合は、タイプセッティングを研究する必要があります。インターネットで答えを検索した後、問題を解決できる本当にシンプルで実質的な答えはほとんどないことがわかりました。実際、実際のプロジェクトでこの種のレイアウトによく遭遇するため、コミュニケーションと共有のために、余暇を利用してここでその基本的な実装を共有します。

シナリオ要件

特定の幅のボックスで、ボックスの元のレイアウトに影響を与えずにアイテムの両端を揃えます。

<div class="コンテナ">
        <ul>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

ここにこれらのアイテムがあるとします

* {
        マージン: 0;
        パディング: 0;
    }
    
    。容器 {
        幅: 1200ピクセル;
        高さ: 500px;
        背景色: 水色;
        マージン: 0 自動;
    }
    
    ul {
        /* キーは要素の幅で、マージンを負の値にシフトすることでコンテナと重なります*/
        幅: 1220ピクセル;
        左マージン: -20px;
        リストスタイル: なし;
    }
    
    ul li {
        フロート: 左;
        /* 幅 = (ボックスの幅 - 余白の間隔 * 行内の項目数 - 1) / 行内の項目数*/
        /* (1200px - 20 * 2) / 3 */
        幅: 386.666px;
        高さ: 60px;
        マージン: 0px 0 20px 20px;
        背景色: 赤;
    }

CSSの鍵は、アイテムの幅を計算する必要があることです両端のメント、フローティングレイアウト、フロー方向の幅が十分ではない場合、フローの列が1つずつ折りたたまれていると想像してください最後に連続して、明らかにマージンを0に設定するのが最良のソリューションではありません。現時点では、外側のボックス、外側のボックスULの幅(ここではULタグを使用し、ブロックタグは問題ありません)、および-Margin値設定を扱うことができます。

外箱の幅が1220pxなのはなぜですか

これはコンテナの元の幅です

これは ul の幅です。はい、コンテナよりも大きく、右側が大きくなっています。その後、ul を -margin で処理すると、両端が視覚的に揃います。

ulの背景色をキャンセルすると、効果が得られます

要約する

CSS を使用してボックス内の複数の要素を整列させる方法については、これで終わりです。CSS 要素ボックス整列の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQLが中国語の文字を挿入する問題を永久に解決するコツを教えます

>>:  Bootstrap 3.0 学習ノートのボタンとドロップダウン メニュー

推薦する

リクエスト数を制限するために Ajax 同時リクエストを実装するために js を使用するサンプル コード

問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...

ジョセフリング問題を解決する 3 つの JavaScript メソッド

目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...

Javascriptを使用して滑らかな曲線を生成する方法

目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...

JavaScript でのモグラ叩きゲームの実装

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

dockerを使用してdubboプロジェクトをデプロイする方法

1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...

アーティストの自己啓発におけるいくつかの経験

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

Dockerコンテナアプリケーションログの表示方法

docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

ナビゲーションデザインと情報アーキテクチャ

<br />ナビゲーションについて話すときは、ほとんどの場合、ナビゲーションがコンテンツ...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

TypeScript のユニオン型、交差型、型ガード

目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...