CSS で回転した要素が他の要素と重ならないようにするにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS で回転した要素が他の要素と重ならないようにするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-13 02:11:12

オリジナル

804 人が閲覧しました

How to Prevent CSS Rotated Elements from Overlapping Other Elements?

垂直方向に整列する 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>

ログイン後にコピー

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

ログイン後にコピー

このコードの結果、次のレイアウトが生成されます:

[4 列のテキストの画像、3 列目が回転90 度]

ご覧のとおり、回転されたテキストは他の要素と重なっています。

解決策:

この問題を解決するには、次のようにします。親要素の writing-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;
}

ログイン後にコピー

このコードの結果、次のレイアウトが作成されます。

[4 列のテキストのイメージ、3 列目が回転されています。垂直方向]

ご覧のとおり、回転されたテキストは親要素内で垂直方向に整列され、他の要素と重なりません。

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