如何向上移动多个<div>？
我有三个div。第一个(A)的宽度和高度均为100%。下一个(B)的宽度为80%，高度是可变的，仅由其含量决定。我想把B放在A的底线上，使B的中点与A的中点对齐。我设法使用transform：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>
回答 5
Stack Overflow用户
发布于 2019-12-01 16:43:57
您可以使用以下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>
Stack Overflow用户
发布于 2019-12-01 17:03:21
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来工作。基本上，它通过javascript获得元素B的高度(这将获得任何高度，包括填充、边框和元素内部内容引起的任何大小变化)，然后将其一分为二，以获得元素B的高度的一半。然后，它将元素C的顶部移回计算出的像素数。
它也不需要任何Jquery。
尝试代码片段，它是有效的。希望这能有所帮助！
Stack Overflow用户
发布于 2019-12-01 17:16:52
如果您可以修改标记，根据您的用例，您可以这样做：
#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>
https://stackoverflow.com/questions/59127227
复制
腾讯云开发者
