CSS でテキストを回転するときに適切な配置を実現するにはどうすればよいですか?

CSS でテキストを回転して垂直方向の配置を行う

CSS でテキストを回転するときに遭遇する一般的な課題の 1 つは、テキストとその周囲の配置を維持することです。要素。これに対処するために、問題を調査して解決策を提供しましょう。

質問で提供されている HTML と CSS は、 .rotateObj .title クラスに -90 度の回転を適用することでテキストを垂直方向に回転させようとする試みを示しています。 。ただし、これにより位置ずれが発生し、意図した要素の配置が崩れます。

回転によりテキストの自然な流れが妨げられるため、位置ずれが発生します。テキストを 90 度回転すると、テキストは垂直になり、周囲の要素とは異なるスペースを占めます。これを克服するには、向きの変化を考慮し、それに応じて他の要素を調整する必要があります。

効果的なアプローチの 1 つは、transform プロパティを使用してテキストを回転することです。 Transform を使用すると、回転などのさまざまな方法で要素を操作できます。 -90 度の変換回転を .rotateObj .title クラスに適用すると、目的の垂直方向の配置を実現できます。

<code class="css">.rotateObj .title {
    transform: rotate(-90deg);
}</code>

ただし、テキストを回転するだけでは不十分な場合があります。あなたの特定のケースでは、コンテンツ div がフローティングされているために配置に関する問題が発生します。要素がフローティングされると、その要素はドキュメントの通常のフローから削除されます。これは、内部のテキストが回転すると、コンテンツ div の高さが正しく計算されないことを意味します。

これを解決するには、.rotateObj .content クラスから float プロパティを削除して、それが

<code class="css">.rotateObj .content {
    float: none;
    width: 600px;
    height: 100%;
    padding: 20px;
}</code>

回転変換を組み合わせて float プロパティを削除すると、適切な配置を維持しながらテキストを垂直方向に回転できます。と要素の位置。

以上がCSS でテキストを回転するときに適切な配置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。