如何移动多个<div>向上？

Question

我有三个div。 第一个 (A) 的宽度和高度均为 100%。 下一个 (B) 的宽度为 80%，高度可变且仅由其内容决定。 我想将 B 定位在 A 的底线上，以便 B 的中点与 A 对齐。 我设法使用 transform: translateY(-50%);实现了这一点translateY(-50%); .

但是，下面的div（C，也是可变高度）没有跟在（B）后面，留下了一个巨大的差距，我想摆脱它。

您有什么想法可以缩小差距吗？ 难点在于不可能提前知道B的身高。

谢谢！

赫伯斯

您可以使用此 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>

Answer 1

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

 var height_of_b = $('#b').outerHeight(); var offset = height_of_b / -2; $('#b').css('margin-top', offset);

 #a { background: #6671ff; height: 100px; } #b { background: #f171ff; width: 80%; height: 80px; position: relative; } #c { background: #663699; height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div>

Answer 2

 var b = document.getElementById("b"); var c = document.getElementById("c"); c.style.top = (-(b.offsetHeight / 2)) + "px";

 #a { background: #6671ff; height: 200px; position: relative; } #b { background: #f171ff; width: 80%; height: 180px; transform: translateY(-50%); border: 3px solid aqua; padding: 10px; } #c { background: #663699; height: 200px; position: relative; }

 <div id="a">A</div> <div id="b">B</div> <div id="c">C</div>

如果你使用一些 javascript 没问题，这可以用 3 行 javascript 和一些额外的 CSS 来完成工作。 它还考虑了您在元素 #b 上放置的任何填充或边框，因此我认为如果您要在该中间元素上添加一些额外的样式，它会很有用。 它适用于中间元素设置的任何高度，也不依赖于顶部或底部元素的高度。

我的方法使用了 CSS 的position: relative和 javascript 的offsetHeight的offsetHeight来工作。 基本上，它通过 javascript 获取元素 B 的高度（这将获取任何高度，包括填充、边框以及元素内部内容引起的任何大小变化），然后将其除以二以获得一半元素 B 的高度。然后，它将元素 C 的顶部向后移动计算出的像素量。

它也不需要任何 Jquery。

尝试代码片段，它有效。 希望这可以帮助！

Answer 3

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

 #a { border:1px dashed #6671ff; height: 100px; position: relative; } #b { border:1px dashed #f171ff; width: 80%; height: 80px; margin: 0 auto; } #c { border:1px dashed orange; height: 200px; } #bc { position: absolute; top: 50%; left: 0; width: 100%; z-index: 1; } body { padding: 20px; }

 <div id="a"> A <div id="bc"> <div id="b">B</div> <div id="c">C</div> </div> </div>

Answer 4

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

 const secondBox = document.querySelector('.box2'); const thirdBox = document.querySelector('.box3'); function outputsize() { const transformHeight = secondBox.offsetHeight / 2; thirdBox.style.transform = `translateY(-${transformHeight}px)`; } outputsize() new ResizeObserver(outputsize).observe(secondBox)

 * { margin: 0; } .box { width: 200px; } .box1 { height: 200px; background: blue; } .box2 { transform: translateY(-50%); background: pink; opacity: .5; } .box3 { background: purple; height: 50px; }

 <div class="box box1"></div> <div class="box box2"> <p>dummydata</p> <p>dummydata</p> <p>dummydata</p> <p>dummydata</p> <p>dummydata</p> <p>dummydata</p> <p>dummydata</p> </div> <div class="box box3"></div>

请注意：并非所有浏览器都支持ResizeObserver api。 您可以在此处获得有关此事的更多信息。

Answer 5

这是一个只有 HTML/CSS 的版本。 我修改了它，通过设置position: absolute;来保持高度动态position: absolute; 和transform: translateY(50%); 在div B 里面的position: relative; div A。

 #a { background: #6671ff; height: 100px; margin-bottom: 50px; position: relative; } #b { background: #f171ff; width: 80%; height: 80px; position: absolute; transform: translateY(50%); } #c { background: #663699; height: 200px; }

 <div id="wrapper"> <div id="a"> A <div id="b">B</div> </div> <div id="c">C</div> </div>