回転された CSS 要素が親の高さに正しく影響を与えるようにするにはどうすればよいですか?

CSS で要素を回転: 親の高さを正しく変更する

CSS では、ドキュメントのレイアウトやフローに影響を与えることなく要素を回転できます。 。ただし、親の高さに影響を与えるために要素の回転テキストが必要な場合は疑問が生じます。

次のシナリオを考えてみましょう:

<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 を適用します:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

その結果、回転されたテキストが隣接する要素と重なり合います。目標は、CSS を変更して、回転された要素が親の高さに正しく影響し、テキストの重なりを防ぐことです。

解決策

書き込みサポートの改善を利用する最新のブラウザの -mode では、次のプロパティの組み合わせを使用して解決策を実現で​​きます。

.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 中国語 Web サイトの他の関連記事を参照してください。