cssのdirection属性の使い方と定義を詳しく解説

CSS 方向属性はシンプルで覚えやすく、属性値が低く、互換性が高いため、重要なときに心配や労力を節約でき、他の人の特別なスキルを埋もれさせる必要がありません。

構文:

direction : ltr | rtl | inherit

パラメータ:
ltr: 左から右へのテキストフロー
rtl: 右から左へのテキストフロー
inherit: テキストストリームの値は継承可能ではありません

説明:
設定に使用されますテキストの流れの方向。
方向属性をインライン テキストに適用する場合は、unicode-bidi 属性を embed または bidi-override に設定する必要があります。
対応するスクリプト機能は方向です。私が書いた他の本もご覧ください。

例:

div { direction: rtl; unicode-bidi: bidi-override; }

基本的に、誰もが次の 2 つの属性値だけを気にする必要があります:

direction: ltr;   // 默认值direction: rtl;

このうち、ltr は初期値であり、左から右、つまり左から右を意味します。具体的に説明すると、インラインコンテンツは左から右に配置されます。たとえば、前後に 2 つの 画像 がある場合、デフォルトでは最初に DOM を持つものが表示されます。左。

rtl は、right-to-left の略で、右から左へという意味です。先ほどの 2 つの画像に対して、この CSS ステートメントを追加して適用します。デフォルトでは、DOM が先頭にあるものが右側に表示され、コンテナの右端に表示されます。

たとえば、mm1 は Zhang Hanyun で、DOM 構造は次のとおりです:

<p class="rtl"><img  src="mm1.jpg" alt="cssのdirection属性の使い方と定義を詳しく解説" > <img  src="mm2.jpg" alt="cssのdirection属性の使い方と定義を詳しく解説" ></p>

その結果、Zhang 姉は左ではなく右端に走ったように見えますが、同時にコンテナは右にあるようです。以下のスクリーンショットに示すように、整列されました:

変更されたのは、inline要素のみですブロックの左右の順序
方向属性の値がrtlの場合、順序はテキストは変更されません。例:

<p class="rtl"><span>span1</span> <span>span2</span></p>

その結果、span1 は依然として左側にあり、span2 は右側になります:

インライン要素ブロックの左と右の順序のみが変更されるため、すべてのテキストが変更されます。は、インラインタグで区切られていても、実際には同種のインラインボックスであり、全体として扱われるため、おおよその右揃え効果のみが得られますが、各テキストの左右の順序は変わりません。

以上がcssのdirection属性の使い方と定義を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。