Bagaimanakah Saya Boleh Membuat Elemen CSS Diputar dengan Betul Mempengaruhi Ketinggian Ibu Bapa Mereka?

Elemen Diputar dalam CSS: Mempengaruhi Ketinggian Induk Dengan Betul

Dalam CSS, elemen boleh diputar tanpa menjejaskan reka letak atau aliran dokumen . Walau bagaimanapun, persoalan timbul apabila elemen memerlukan teks yang diputar untuk memberi kesan kepada ketinggian ibu bapanya.

Pertimbangkan senario berikut:

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

Menggunakan CSS berikut:

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

Hasil dalam teks yang diputar bertindih dengan elemen jiran. Matlamatnya adalah untuk mengubah suai CSS bagi memastikan elemen yang diputarkan betul-betul mempengaruhi ketinggian induknya, mengelakkan pertindihan teks.

Penyelesaian

Mengambil kesempatan daripada sokongan yang dipertingkatkan untuk menulis -mod dalam pelayar moden, penyelesaian boleh dicapai menggunakan gabungan sifat:

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

CSS yang dikemas kini ini memastikan elemen yang diputar menghormati ketinggian bekas induknya, sekali gus menghalang teks bertindih dan mencapai reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen CSS Diputar dengan Betul Mempengaruhi Ketinggian Ibu Bapa Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!