代码之家  ›  专栏  ›  技术社区  ›  JarsOfJam-Scheduler

如何使用转换:在自动调整父级大小的同时对子级进行translatey?

  •  0
  • JarsOfJam-Scheduler  · 技术社区  · 5 年前

    设为包含第二个除法的除法。第一个规则没有显著的CSS规则;第二个规则是由它的宽度和高度定义的。两者都是彩色的。

    几个像素的Y平移应用于子划分,如下所示:

    https://codepen.io/anon/pen/KbjLMw

    来源

    HTML

    <div id="parent">  
      <div id="child"></div>
    </div>
    

    CSS

    #parent {
      background: red;
    }
    
    #child {
      background: yellow;
      width: 100px;
      height: 100px;
      transform: translateY(253px);
    }
    

    问题

    我们希望父级划分的高度随子级划分的移动而增加。怎样才能取得这样的结果呢?使用transform:translatey(xyz)是可取的,但不是必需的。

    2 回复  |  直到 5 年前
        1
  •  1
  •   04FS    5 年前

    我们希望父级划分的高度随子级划分的移动而增加。怎样才能取得这样的结果呢?

    使用转换是不可能的,因为这样可以保留元素将要占用的空间 原来 保留,但它确实使其在新位置占据空间。

    你可以让父母成长,如果你通过 margin-top: 253px; 相反。(当然,这会导致 外边距折叠 在这里的情况,但这可以通过让父母 inline-block 或设置 overflow:hidden )

        2
  •  1
  •   Xenio Gracias    5 年前

    添加 margin-top: 90px; 到子级并添加 padding-top: 1px . 希望这就是你要找的。谢谢

    为您的参考链接。

    https://codepen.io/Xenio/pen/XOXJGz