要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウトの --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 学習ノートのボタンとドロップダウン メニュー
問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...
展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...
目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...
目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...
この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...
docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...
1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...
<br />ナビゲーションについて話すときは、ほとんどの場合、ナビゲーションがコンテンツ...
目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...
目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...