Question

如何仅使用css使position:absolute和动态高度的元素占用垂直空间？我可以使用容器和显示器的技巧吗？

Answer 1

不幸的是，根据定义，使用绝对定位意味着您的元素不再占用空间。所以不，只有通过CSS，没有办法做到这一点。

你当然可以使用jQuery（或普通的javascript）来实现这一目标。我是怎么做的，每个垂直元素旁边都有一个space元素。将空间元素和绝对定位的垂直元素包含在相对定位的div中。在页面加载时，更改space元素的height以匹配垂直元素的高度。

Answer 2

position: absolute意味着他们不占用流量中的空间。但是，您不必使用边距设置动画，您可以使用float让元素占用任何空间，并使每个元素position:relative。

div.animate-me {
   width: 300px;
   margin: 20px;
   float: left;
   left: -1000px; // Make them start offscreen
   position: relative;
   border: 1px solid red;
   visibility: hidden
}

$('div').css().animate({
    left: 0
});

SAMPLE http://jsfiddle.net/qxzzX/1/

Answer 3

这并非在所有情况下都适用，但是：如果position: absolute元素具有固定的宽高比（例如，用height: auto响应地调整图像或视频大小），则可以利用{ {3}}赋予间隔元素相同的长宽比，使其与absolute元素一起调整大小：

.spacer {
  height: 0;
  padding-bottom: 125%; /* for a 1.25 height/width ratio */
}

您可以阅读该链接，但这是可行的，因为padding-bottom带有百分比被解释为元素宽度的百分比。

然后根据您的特定布局来定位间隔物，使其精确地覆盖或覆盖position: absolute元素，并占用absolute元素在没有{{1 }}。

元素的垂直空间与位置：绝对

3 个答案: