回転された CSS 要素が親の高さを正確に調整できるようにするにはどうすればよいですか?

親の高さに正確に影響する CSS 内の要素の回転

CSS で、書き込みモード プロパティと変換を使用して要素を回転すると、問題が発生する場合があります親要素の高さが正しく調整されていません。これにより、テキストの重なりや不要な視覚効果が生じる可能性があります。

たとえば、複数の列を持つコンテナがあり、そのうちの 1 つの列のテキストを回転したいとします。適切な CSS がないと、回転された要素が親の高さに影響を与えず、テキストが他の要素と重なってしまう可能性があります。

この問題に対処するには、writing-mode プロパティを使用して、テキストを要素内にどのように記述するかを指定できます。要素。この場合、「vertical-rl」値を使用して、テキストを垂直方向に右から左に書くことができます。さらに、transform プロパティを使用して要素を 180 度回転して、目的の効果を実現できます。

これらのプロパティを組み合わせることで、回転した要素が親の高さに正しく影響し、テキストが確実に親の高さに収まるようになります。列であり、他の要素と重なりません。 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;
}

このコードは、回転された要素が親の高さに正しく影響し、テキストの重なりを防ぎ、望ましい外観を実現します。

以上が回転された CSS 要素が親の高さを正確に調整できるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。