首頁 > web前端 > css教學 > 如何讓旋轉的 CSS 元素正確影響其父元素的高度?

如何讓旋轉的 CSS 元素正確影響其父元素的高度?

Mary-Kate Olsen
發布: 2024-12-12 12:00:32
原創
289 人瀏覽過

How Can I Make Rotated CSS Elements Correctly Influence Their Parent's Height?

CSS 中的旋轉元素:正確影響父級高度

在CSS 中,可以在不影響文件佈局或流程的情況下旋轉元素。但是,當元素需要旋轉文字來影響其父元素的高度時,就會出現問題。

考慮以下場景:

1

2

3

4

5

6

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

登入後複製

套用下列 CSS:

1

2

3

4

5

6

7

8

.statusColumn b {

  writing-mode: tb-rl;

  white-space: nowrap;

  display: inline-block;

  overflow: visible;

  transform: rotate(-90deg);

  transform-origin: 50% 50%;

}

登入後複製

導致旋轉的文字與相鄰元素重疊。目標是修改 CSS 以確保旋轉的元素正確影響其父元素的高度,從而防止文字重疊。

解決方案

利用改進的書寫支援-mode 在現代瀏覽器中,可以使用屬性組合來實現解決方案:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.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 確保旋轉的元素尊重其父容器的高度,從而防止文字重疊並實現所需的佈局。

以上是如何讓旋轉的 CSS 元素正確影響其父元素的高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板