Bagaimanakah Saya Boleh Memastikan Elemen CSS Diputar Dengan Tepat Melaraskan Ketinggian Ibu Bapanya?

Elemen Diputar dalam CSS Mempengaruhi Ketinggian Induk Dengan Tepat

Dalam CSS, elemen berputar menggunakan sifat dan transformasi mod penulisan kadangkala boleh membawa kepada isu dengan ketinggian elemen induk tidak melaraskan dengan betul. Ini boleh mengakibatkan teks bertindih atau kesan visual yang tidak diingini.

Sebagai contoh, katakan kita mempunyai bekas dengan beberapa lajur, tempat kita ingin memutar teks dalam salah satu lajur. Tanpa CSS yang betul, elemen yang diputar mungkin tidak menjejaskan ketinggian induk, menyebabkan teks bertindih dengan elemen lain.

Untuk menangani isu ini, kita boleh menggunakan sifat mod penulisan untuk menentukan cara teks harus ditulis dalam unsur tersebut. Dalam kes ini, kita boleh menggunakan nilai "vertical-rl" untuk menulis teks secara menegak dan dari kanan ke kiri. Selain itu, sifat transformasi boleh digunakan untuk memutarkan elemen sebanyak 180 darjah untuk mencapai kesan yang diingini.

Dengan menggabungkan sifat-sifat ini, elemen yang diputar kini akan mempengaruhi ketinggian induk dengan betul, memastikan teks itu sesuai dengan lajur dan tidak bertindih dengan elemen lain. Berikut ialah contoh kod CSS:

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

Kod ini akan memastikan elemen yang diputar mempengaruhi ketinggian ibu bapa mereka dengan betul, menghalang teks bertindih dan membenarkan penampilan visual yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Elemen CSS Diputar Dengan Tepat Melaraskan Ketinggian Ibu Bapanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!