Wie kann ich die letzte Zeile eines DIV in allen Browsern rechtfertigen?

Begründung der letzten Zeile eines DIV: Ein umfassender Ansatz

Das Begründen der letzten Zeile eines DIV kann, wie es normalerweise der Fall ist, eine Herausforderung darstellen Standardmäßig wird es linksbündig ausgerichtet. Es gibt jedoch eine Methode, die dieses Problem in allen Browsern, einschließlich IE6 und höher, effektiv behebt.

Diese Methode nutzt eine Kombination von CSS-Eigenschaften:

• text-align- last: justify: Diese von Microsoft eingeführte Eigenschaft wird von IE-Browsern unterstützt.
• :after Pseudoinhalt:Dieses Pseudoelement erstellt einen unsichtbaren Inline-Block, der die Breite des DIV erweitert.

Zusätzlich wird zum Umgang mit einzeiligen Textelementen Folgendes empfohlen:

• Stellen Sie die Höhe und Zeilenhöhe des Elements auf 1em ein, um unnötige Leerzeichen zu vermeiden Zeile.

CSS-Implementierung:

Um die letzte Zeile eines DIV zu rechtfertigen, können die folgenden CSS-Regeln verwendet werden:

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

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

Für einzeilige Textelemente ist Folgendes erforderlich:

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

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

Detailliert Erläuterung:

• text-align-last: justify: Gibt die Ausrichtung der letzten Zeile in einem Blockelement an.
• : after pseudo-content: Erstellt einen leeren Inline-Block, der die Breite des DIV ausdehnt, um sicherzustellen, dass die text-align: justify-Eigenschaft auf den letzten angewendet wird Zeile.
• Höhe und Zeilenhöhe: Bei einzeiligen Textelementen verhindert das Festlegen der Höhe und Zeilenhöhe auf 1em eine leere Zeile, die andernfalls nach der ausgerichteten letzten Zeile erscheinen würde.

Dieser kombinierte Ansatz stellt sicher, dass die letzte Zeile eines DIV in mehreren Browsern ausgerichtet ist und ein professionelles und ästhetisch ansprechendes Layout bietet.

Das obige ist der detaillierte Inhalt vonWie kann ich die letzte Zeile eines DIV in allen Browsern rechtfertigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!