2

我正在动态生成几个内联表（高度不同），并且我需要在每个表的左侧垂直居中、旋转 270° 的标题。我尝试了transform, writing-mode, 定位等的几种组合。

我可以通过 和 的组合使文本向正确的方向旋转，writing-mode: vertical-rl; 但transform:rotate(180deg);随后定位变成了一场噩梦。

为了进一步混淆问题，它在 Firefox 与 Chrome 和 CodePen 与 SO 片段 [下] 中呈现不同，基本上给了我 3 种变体。前缀（现在已注释掉）似乎没有什么不同。

我已经盯着这个很久了；我错过了什么明显的东西吗？

我想要什么：

我想要的例子

我有什么：

（蓝线是容器边框，包括在内以进行比较。） 我所拥有的例子

//ignore this; It just creates a bunch of duplicates
var els=document.body.getElementsByClassName('cont');
for(n=0;n<10;n++)els[1].insertAdjacentHTML('afterEnd', els[Math.round(Math.random())].cloneNode(1).outerHTML);
body { font-family: arial; }

.cont {
  display: inline-block;
  border: 3px solid blue;
  margin: 2px 5px;
}

table {
  display: inline-block;
  border-collapse: collapse;
}

td {
  width: 50px;
  height: 50px;
  border: 1px solid;
}

.title {
  display: inline-block;
  font-weight: bold;
  text-align: center;

/* -ms-writing-mode: tb-rl; 
   -webkit-writing-mode: vertical-rl;
   -moz-writing-mode: vertical-rl;
   -ms-writing-mode: vertical-rl;  */

  writing-mode: vertical-rl;
/* transform:rotate(180deg); */
}
<div class='cont'>
  <div class='title'>Title</div>
  <table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </table>
</div>

<div class='cont'>
  <div class='title'>Title</div>
  <table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </table>
</div>

4

0 回答 0