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

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

css-transforms css

JarsOfJam-Scheduler · 技术社区 · 7 年前

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

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

来源

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

#parent {
  background: red;
}

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

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

2 回复 | 直到 7 年前

04FS 7 年前

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

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

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

Xenio Gracias 7 年前

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

为您的参考链接。

推荐文章

Jam3sn · 变量旋转文本的绝对位置

7 年前

John Balvin Arias · 当css transform:scale()处于活动状态时,单击边框按钮会触发单击

7 年前

Joshua Leung · 如何旋转文本并固定到右下角?

7 年前

marius · jQuery UI可选css转换问题

8 年前

jean-max · 矩形中的菱形HTML和CSS3

8 年前

Eugenio · 无极旋转DIV,但具有绝对定位

8 年前

Boucherie · CSS/SCSS rails转换div,但不是嵌套图像(rails)

8 年前

akhil regonda · 如何使用transform scale删除屏幕上显示的滚动条?

8 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

8 年前

Scoob · 在flexbox中不工作的锚点元素上变换比例

8 年前