CSS とその他を実装する 4 つの方法 distribution_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS とその他を実装する 4 つの方法 distribution_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:19 AM

× Directory [1] float [2] inline-block [3] table [4] flex

前述の通り

均等配分とは、子要素が親要素の幅を均等に配分するレイアウト方法を指します。この記事では、均等配分の 4 つの方法の実装を紹介します

アイデア 1: float

欠点: 構造とスタイルの間にカップリングがあり、IE7 ブラウザーでは幅のパーセント値に丸め誤差があります

【 1】float+padding+background -clip

サブ要素間の間隔を実現するにはpaddingを使用し、サブ要素のpadding部分に背景を表示しないようにするにはbackground-clipを使用します

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    margin-right: -20px;    overflow: hidden;}.child{    float: left;    height: 100px;    width: 25%;    padding-right: 20px;    box-sizing: border-box;    background-clip: content-box;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

【2】float + margin + calc

marginを使って実現サブ要素間の間隔は、calc()関数を使ってサブ要素の幅を計算

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    overflow: hidden;    margin-right: -20px;}.child{    float: left;    height: 100px;    width: calc(25% - 20px);    margin-right: 20px;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

【3】 float + margin + (fix)

互換性を実現するために構造を追加することで、マージンを使用してサブ要素間の間隔を実現します

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    overflow: hidden;    margin-right: -20px;}.child{    float: left;    width: 25%;}.in{    margin-right: 20px;    height: 100px;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: blue;">            <div class="in" style="background-color: lightblue;">1</div>        </div>        <div class="child" style="background-color: green;">            <div class="in" style="background-color: lightgreen;">2</div>        </div>        <div class="child" style="background-color: orange;">            <div class="in" style="background-color: lightsalmon;">3</div>        </div>        <div class="child" style="background-color: red;">            <div class="in" style="background-color: pink;">4</div>        </div>                    </div>    </div>

アイデア 2: inline-block

欠点: 垂直整列メソッドvertical-alignを設定する必要があり、改行がスペースに解析されるギャップの問題に対処する必要があります。 IE7 ブラウザでは、ブロックレベル要素の inline-block 属性の設定はサポートされていません。互換性のあるコードは、display:inline;zoom:1;

【1】inline-block +padding +background-clip

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    font-size: 0;    margin-right: -20px;    overflow: hidden;}.child{    display:inline-block;    vertical-align: top;    width: 25%;    padding-right: 20px;    box-sizing: border-box;    background-clip: content-box;    font-size: 16px;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

です。

【2】inline-block + margin + calc

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    margin-right: -20px;    font-size: 0;}.child{    display: inline-block;    vertical-align: top;    font-size: 16px;    height: 100px;    width: calc(25% - 20px);    margin-right: 20px;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: lightblue;">1</div>        <div class="child" style="background-color: lightgreen;">2</div>        <div class="child" style="background-color: lightsalmon;">3</div>        <div class="child" style="background-color: pink;">4</div>                    </div>    </div>

【3】inline-block + margin + (fix)

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    margin-right: -20px;    font-size: 0;}.child{    display: inline-block;    vertical-align: top;    font-size: 16px;    width: 25%;}.in{    margin-right: 20px;    height: 100px;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: blue;">            <div class="in" style="background-color: lightblue;">1</div>        </div>        <div class="child" style="background-color: green;">            <div class="in" style="background-color: lightgreen;">2</div>        </div>        <div class="child" style="background-color: orange;">            <div class="in" style="background-color: lightsalmon;">3</div>        </div>        <div class="child" style="background-color: red;">            <div class="in" style="background-color: pink;">4</div>        </div>                    </div>    </div>

3 つのアイデア: table

欠点: 要素を table に設定すると、コンテンツの幅が広がります。 IE7 ブラウザと互換性を持たせるには、構造に変更する必要があります。 table-cell要素にはマージンの設定はできず、パディングや背景クリップの設定もできません

【1】table + negative margin

<style>body,p{margin: 0;}.parentWrap{    overflow: hidden;}.parent{    display: table;    width: calc(100% + 20px);    table-layout: fixed;}.child{    display: table-cell;    padding-right: 20px;}.in{    height: 100px;}</style>

<div class="parentWrap">    <div class="parent" style="background-color: lightgrey;">        <div class="child" style="background-color: blue;">            <div class="in" style="background-color: lightblue;">1</div>        </div>        <div class="child" style="background-color: green;">            <div class="in" style="background-color: lightgreen;">2</div>        </div>        <div class="child" style="background-color: orange;">            <div class="in" style="background-color: lightsalmon;">3</div>        </div>        <div class="child" style="background-color: red;">            <div class="in" style="background-color: pink;">4</div>        </div>                    </div>    </div>

【2】 table + 兄弟セレクター

アイデア 4: flex

<style>body,p{margin: 0;}.parent{    display: table;    width: 100%;    table-layout: fixed;}.child{    display: table-cell;}.child + .child{    padding-left: 20px;}.in{    height: 100px;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="child" style="background-color: blue;">        <div class="in" style="background-color: lightblue;">1</div>    </div>    <div class="child" style="background-color: green;">        <div class="in" style="background-color: lightgreen;">2</div>    </div>    <div class="child" style="background-color: orange;">        <div class="in" style="background-color: lightsalmon;">3</div>    </div>    <div class="child" style="background-color: red;">        <div class="in" style="background-color: pink;">4</div>    </div>                </div>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。