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中文網其他相關文章!