如何移动多个 向上？

Question

我有三个div。第一个（A）的宽度和高度为100％。下一个（B）具有80％的宽度和高度，该高度是可变的并且仅由其含量确定。我想将B定位在A的底线上，以使B的中点与A的中点对齐。我设法通过以下转换来完成此操作：translateY(-50%);。

但是，下面的div（C，也是可变高度）不跟随（B），并且留下了巨大的空白，我想摆脱它。

您有任何想法如何缩小差距？困难在于不可能事先知道B的高度。

“>

谢谢！

Herberth

您可以使用此HTML文件：

#a {
  background: #6671ff;
  height: 100px;
}

#b {
  background: #f171ff;
  width: 80%;
  height: 80px;
  transform: translateY(-50%);
}

#c {
  background: #663699;
  height: 200px;
}
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

我有三个div。第一个（A）的宽度和高度为100％。下一个（B）具有80％的宽度和高度，该高度是可变的并且仅由其含量确定。我想将B放在A的...

Answer 1

[您可以使用以下jQuery代码获取#b的高度，然后将其除以-2（=一半，但为负值），并将其作为负margin-top应用于#b：

Answer 2

Answer 3

您可以使用Javascript将侦听器添加到第二个框的大小更改中。每次更改时，计算其新高度的一半，并相应地设置第三个框的transform属性。

Answer 4

这里是仅HTML / CSS版本。我通过在position: absolute;transform: translateY(50%);A内的div B上设置position: relative;和div来保持高度动态进行了修改。

Answer 5

如果您可以修改标记，则可以根据用例执行以下操作：