Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menghalang Elemen Sebaris Diputar daripada Menjejaskan Ketinggian Ibu Bapa Mereka dalam CSS?

Bagaimanakah Saya Boleh Menghalang Elemen Sebaris Diputar daripada Menjejaskan Ketinggian Ibu Bapa Mereka dalam CSS?

DDD
Lepaskan: 2024-12-23 14:04:13
asal
338 orang telah melayarinya

How Can I Prevent Rotated Inline Elements from Affecting Their Parent's Height in CSS?

Elemen Diputar yang Mempengaruhi Ketinggian Induk dalam CSS

Apabila menggunakan putaran pada elemen sebaris, adalah penting untuk memastikan ketinggian ibu bapa tidak terjejas. Pertimbangkan senario di mana kita mempunyai berbilang lajur dengan teks dan ingin memutar beberapa.

Contoh:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
Salin selepas log masuk
<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>
Salin selepas log masuk
Salin selepas log masuk

(Sebelumnya):
[Imej teks diputar bertindih yang lain lajur]

(Dikehendaki):
[Imej teks diputar dalam lajurnya sendiri, tidak bertindih yang lain]

Penyelesaian

Menggunakan penulisan -mode dan putar, kita boleh mencapai keinginan ini kesan:

.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;
}
Salin selepas log masuk
<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>
Salin selepas log masuk
Salin selepas log masuk

(Selepas):
[Imej teks diputar dalam lajurnya sendiri, tidak bertindih yang lain]

Penyelesaian ini memastikan bahawa elemen yang diputar menghormati ketinggian ibu bapanya, mengelakkan teks bertindih.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Elemen Sebaris Diputar daripada Menjejaskan Ketinggian Ibu Bapa Mereka dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan