3

見出しが内部にあるdivがあり、CSSで-90度回転して垂直に表示されるように変換されています。

#mydiv h2 {
    writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space: nowrap;
    width: 20px;
    height: 20px;
}

問題は、含まれているdivがテキストに沿って伸びないことです。代わりに、テキストはdivボックスの外側に浮かんでいます。

テキストでdivをストレッチするにはどうすればよいですか？

4

4 に答える 4

2

とを設定width: auto;してみてください。ただし、次のようtransform-originに含まれています。div

div {
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    transform-origin: top left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 2px green;
    width:auto;
    height:20px;
}
h2 {
    margin-top: -5px;
    background: pink;
}

ここで実際の動作を確認できます：http ：//dabblet.com/gist/2725392 これがお役に立てば幸いです。

于 2012-05-18T13:58:47.193 に答える
1

を使用したアプローチについてはtransform、同様の質問に対する私の回答を参照してください：https ://stackoverflow.com/a/47860039/1709587

または、Chromeの最新バージョンでは、（または非推奨の）を使用するだけで問題なく動作するようです。含まれているdivは、その中のh2に正しく対応し、sは必要ありません。以下の例を参照してください。writing-mode: vertical-lrwriting-mode: td-lrtransform

#container {
  /* Pink background for easier visualisation of the end result */
  background: pink;
  
  /* Optional; shrinks width of div to minimum required to contain h2 */
  display: inline-block;
}

#container h2 {
  /* Note that the td-lr value used in the question is deprecated;
     vertical-lr is the modern equivalent. See:
     https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

     Consider also using
       -webkit-writing-mode: vertical-lr
     and
       -ms-writing-mode: td-lr
     for compatibility with older browsers. */
  writing-mode: vertical-lr;

  /* Optional; flips the heading, so that it is written bottom-to-top
     instead of top-to-bottom.
     Consider also using -webkit-transform and -moz-transform and
     -o-transform and an equivalent transform with filter for compatibility
     with old browsers.*/
  transform: scale(-1, -1);
  
  /* Optional: disable breaks in the title */
  white-space: nowrap;
}
<div id="container">
  <h2>Some text</h2>
</div>
<div>
  More stuff
</div>

ただし、Firefox、Edge、またはSafariの現在のバージョン（2017年12月）でこれを機能させようとすると、多数のレイアウトのバグが見つかります。現在、4つの主要なブラウザは垂直方向writing-modeの処理をかなり破っています。それらは互いに一貫性がなく、決定論的でもないことがよくあります。開発ツールでスタイルルールのオンとオフを切り替えて、別のレイアウトのページを作成することができます。そのため、このアプローチはオプションですが、使用に注意し、使用する場合は広範囲にテストしてください。

于 2017-12-17T16:43:08.547 に答える
-1

h2サイズではなく、divサイズをターゲットにする必要があります。以下のコードを追加して、確認してください。

#block-views-archive-block {
height: 20px;
width:20px;
overflow: visible;
}
于 2012-05-18T13:46:44.783 に答える
-1

テキストの代わりにdivを変換した場合はどうなるでしょうか。そうすることで、divの内容も変換されると信じています。

heightに設定することもできますauto。

heightまたは、必要なピクセル数を追加して手動で増やすこともできます。

これらのソリューションの1つが機能することを願っています！

-ブライアン

于 2012-08-16T19:44:34.847 に答える