Question

我希望将表格标题中的文字旋转90度（这是一个明智的用例），但是transform: rotate(-90.0deg);在布局方面表现不佳。也就是说，父元素将其高度调整为孩子的高度，其在旋转之后是宽度。这很烦人，因为这会使子元素显着溢出父元素，导致文本与其他文本重叠。

示例（https://jsfiddle.net/jpe3voxy/）

<div id="z">
  A very long header
</div>
<div id="a">
  <div id="b">
    Hello World
  </div>
</div>

#a {
  background-color: blue
}

#b {
  background-color: red;
  transform: rotate(-90.0deg);
  overflow: hidden;
  height: 50px; width: 200px;
}

元素#b与标题重叠。可以通过在#b上添加翻译转换并在#a上强制执行特定尺寸来解决此问题。换句话说，手动布局，这是凌乱的，并且对于#b的动态内容一般不起作用。

问题如何制作父元素布局w.r.t.子元素的边界框，而不是子元素的未转换大小？

Answer 1

想法是考虑为变换后的元素添加边距，使其高度+边距等于其宽度，然后调整变换原点：

private IntPtr HookCallback( int nCode, IntPtr wParam, IntPtr lParam )
{
    if (nCode >= 0)
    {
        int vkCode = Marshal.ReadInt32(lParam);
        int keyAction = wParam.ToInt32();

        EventHandlerKey( keyAction, vkCode );
    }

    return CallNextHookEx(hookId, nCode, wParam, lParam);
}

private void EventHandlerKey(int keyAction, int keyCode)
{
    // Some process which taking long time..!
}

#a {
  background-color: blue;
  overflow:hidden;
}

#b {
  background-color: red;
  transform: translateX(-100%) rotate(-90.0deg);
  overflow: hidden;
  height: 50px;
  width: 200px;
  margin-bottom:calc(200px - 50px);
  transform-origin:top right;
}

父元素布局w.r.t.旋转元素的边界框

示例（https://jsfiddle.net/jpe3voxy/）

1 个答案: