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;and 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 中使用writing-mode: vertical-lr（或不推荐使用的writing-mode: td-lr）似乎可以正常工作；包含的 div 将正确容纳其中的 h2，并且不需要transforms。请参见下面的示例：

#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>

但是，如果您尝试在当前（2017 年 12 月）版本的 Firefox、Edge 或 Safari 上使用此功能，您会发现大量布局错误；目前，四大浏览器对垂直writing-modes 的处理相当糟糕。它们彼此不一致，而且它们通常甚至都不是确定性的——您可以在开发工具中关闭和再次打开样式规则，最终得到一个不同布局的页面。因此，虽然这种方法是一种选择，但请注意使用它并进行广泛测试。

于 2017-12-17T16:43:08.547 回答
-1

如果你只是转换了 div 而不是文本，相信这样做，它也会转换 div 的内容。

你也可以设置height为auto.

或者您可以尝试height通过添加必要数量的像素来手动增加。

我希望这些解决方案之一有效！

-布赖恩

于 2012-08-16T19:44:34.847 回答
-1

您必须针对 div 大小而不是 h2 大小添加以下代码并检查。

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