Wie kann ich dafür sorgen, dass gedrehte CSS-Elemente die Größe ihres übergeordneten Elements richtig beeinflussen?

Gedrehte Elemente in CSS: Die übergeordnete Höhe richtig beeinflussen

In CSS ist es möglich, Elemente zu drehen, ohne das Layout oder den Fluss des Dokuments zu beeinträchtigen . Es stellen sich jedoch Fragen, wenn der gedrehte Text von Elementen die Höhe ihres übergeordneten Elements beeinflussen muss.

Stellen Sie sich das folgende Szenario vor:

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Anwenden des folgenden CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

Führt dazu, dass der gedrehte Text benachbarte Elemente überlappt. Das Ziel besteht darin, das CSS zu ändern, um sicherzustellen, dass sich das gedrehte Element korrekt auf die Höhe seines übergeordneten Elements auswirkt und Textüberlappungen verhindert werden.

Lösung

Nutzung der verbesserten Unterstützung für das Schreiben -Modus in modernen Browsern kann eine Lösung durch eine Kombination von Eigenschaften erreicht werden:

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

Dieses aktualisierte CSS stellt sicher, dass das gedrehte Element die Höhe berücksichtigt des übergeordneten Containers, wodurch Textüberlappungen vermieden werden und das gewünschte Layout erreicht wird.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass gedrehte CSS-Elemente die Größe ihres übergeordneten Elements richtig beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!