时间戳

首页 > 解决方案 > 如何填充边缘折叠的兄弟姐妹之间的空间？

html - 如何填充边缘折叠的兄弟姐妹之间的空间？

问题描述

问题1：有没有办法让一个元素自动填充两个边缘折叠的兄弟之间的空间，而不增加两者之间的空间？

问题 2：如果没有，有没有办法知道边距折叠时两个元素之间的实际（边距折叠后）空间？

背景：我有一个带有垂直项目列表的页面。这些项目具有不同的垂直间距（即边距），具体取决于它们的内容——即图像项目的顶部和底部边距为100px，文本项目具有50px垂直边距。为了有良好的垂直节奏，故意使用边缘折叠。

现在，我需要“填充”元素，每个元素都占据每个项目之间的所有垂直空间。例如，在图像项和文本项之间，“填充物”需要100px很高才能填充两个项之间的边距折叠空间。这是一个示例，粉红色的填充物填充了所有空间： 在此处输入图像描述

问题：项目列表是动态的，所以我不知道项目之间有多少空间。因为边距塌陷，我无法提前知道填充元素的高度。我希望避免必须根据项目组合的每个排列来拼出填充高度，每个组合都有自己的两个项目类型之间的间距值。

我不能让填充元素影响两个元素之间的空间（所以它是position: absolute）。由于它是position: absolute，我看不到将其锚定到其上方和下方的项目（仅对其中一个项目）的方法。

下面是手动设置填充器高度以填充空间的示例：https ://jsfiddle.net/41pgv63s/

有没有其他方法可以填充两个边缘折叠的元素之间的空间，而不增加它们之间的空间？我不想手动查看上一个/下一个项目并据此计算填充物的高度。我希望有一种纯 CSS 的方法来填充两个项目之间的空间，因此在设置填充项目的高度之前，我不需要知道列表中每个相邻项目之间的上下文。

标签： htmlcss

解决方案

有很多解决方案，但我想到的最快的是：

.in-between-dweller {
  background-color: rgba(255,128,255, 0.3);
  position: absolute;
  bottom: -100%;
  left: 0;
  height: 100%;
  width: 100%;
}


.container {
  position: relative;
}

.box {
  height: 100px;
  border: 1px solid #AAA;
  background-color: #FAFFBB;
}

.one {  
  margin-bottom: 50px;
}

.two {  
  margin-top: 100px;
}

.in-between-dweller {
  background-color: rgba(255,128,255, 0.3);
  position: absolute;
  bottom: -100%;
  left: 0;
  height: 100%;
  width: 100%;
}
<div class="container">
  <div class="box one">Box One (margin-bottom: 50px)</div>
  <div class="in-between-dweller">I'm supposed to cover all the space between the two boxes...</div>
</div>
<div class="container">
  <div class="box two">Box Two (margin-top: 100px)</div>  
</div>

推荐阅读