すべてのブラウザで DIV の最後の行を両端揃えにするにはどうすればよいですか?

DIV の最後の行を両端揃えにする: 包括的なアプローチ

DIV の最後の行を両端揃えにすることは、通常、課題となる可能性があります。デフォルトでは左揃えになります。ただし、IE6 以降を含むブラウザ全体でこの問題に効果的に対処する方法が存在します。

この方法では、CSS プロパティの組み合わせを利用します。

• text-align- last: justify: Microsoft によって導入されたこのプロパティは IE でサポートされていますブラウザ.
• :after pseudo-content: この疑似要素は、DIV の幅を拡張する非表示のインライン ブロックを作成します。

さらに、単一行のテキスト要素の場合は、次のことが推奨されます:

• の高さと行の高さを設定します。不要な空白行を防ぐために、要素を 1em に設定します。

CSS 実装:

DIV の最後の行を両端揃えにするには、次の CSS ルールを使用できます。 used:

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

1 行のテキスト要素の場合、次は次のとおりです。必要:

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

詳細説明:

• text-align-last: justify: 最後の行の配置を指定しますブロック要素内。
• :after pseudo-content: DIV の幅を拡張する空のインライン ブロックを作成し、text-align: justify プロパティが最後の行に確実に適用されるようにします。
• 高さと行の高さ: 1 行のテキスト要素の場合、高さと行の高さを 1em に設定すると、両端揃えの最後の行の後に空行が表示されるのを防ぐことができます。 line.

この組み合わせアプローチにより、DIV の最後の行が複数のブラウザ間で均等に配置され、プロフェッショナルで見た目の美しいレイアウトが提供されます。

以上がすべてのブラウザで DIV の最後の行を両端揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。