Wie kann verhindert werden, dass durch CSS gedrehte Elemente andere Elemente überlappen?

Gedrehte Elemente in CSS, die vertikal ausgerichtet werden

In CSS können Sie die Eigenschaft writing-mode verwenden, um Text vertikal zu drehen. Allerdings kann sich rotierender Text auf die Positionierung seiner übergeordneten Elemente auswirken. Dies kann zu unerwarteten Ergebnissen führen, wie zum Beispiel, dass Text andere Elemente überlappt.

Problem:

Betrachten Sie das folgende Beispiel:

<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>

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

Dieser Code führt zu folgendem Layout:

[Bild des Textes in vier Spalten, wobei die dritte Spalte um 90 gedreht ist Grad]

Wie Sie sehen können, überlappt der gedrehte Text die anderen Elemente.

Lösung:

Um dieses Problem zu beheben, können Sie die verwenden write-mode-Eigenschaft für das übergeordnete Element, um den Text vertikal zu drehen. Dadurch wird sichergestellt, dass der gedrehte Text korrekt im übergeordneten Element ausgerichtet ist.

.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;
}

Dieser Code führt zu folgendem Layout:

[Bild des Textes in vier Spalten, wobei die dritte Spalte gedreht ist vertikal]

Wie Sie sehen können, ist der gedrehte Text jetzt vertikal innerhalb des übergeordneten Elements ausgerichtet und überlappt die anderen Elemente nicht.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass durch CSS gedrehte Elemente andere Elemente überlappen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!