CSS 要素を回転するときに親の高さを正確に維持するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS 要素を回転するときに親の高さを正確に維持するにはどうすればよいですか?

DDD

リリース： 2024-12-10 16:59:14

オリジナル

636 人が閲覧しました

CSS の要素の回転: 親の高さに正確に影響を与える

この記事では、親の高さを歪めずに列内の特定の要素を回転するという課題について説明します。 4 つの列がある例を考えてみましょう。以下に示すように、そのうちの 1 つの値を回転したいとします。

<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%;
}

ログイン後にコピー

これにより、回転された要素が他の要素と重なっているcolumns:

How to Accurately Maintain Parent Height When Rotating CSS Elements?

目的: 回転された要素のサイズが依然として親の高さに寄与し、テキストが表示されない結果を達成すること重複:

How to Accurately Maintain Parent Height When Rotating CSS Elements?

解決策:

G-Cyr が指摘したように、最新のブラウザーは書き込みモードを適切にサポートしています。 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;
}

ログイン後にコピー

このコードは、回転された要素の書き込みモードを「vertical-rl」に設定し、回転後にテキストが垂直に流れるようにします。 180度。また、適切な折り返しが可能になり、テキストの重なりを回避できます。

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