Question

我必须处理一个生成表格（有点......）的软件，它必须能够完全控制元素的位置。

到目前为止，我们有这样的结构：

<div id="container" style="display: table-row">
  <div id="a" style="position: absolute"></div>
  <div id="b" style="position: absolute"></div>
  <div id="c" style="position: absolute"></div>
</div>

使用#a和#b样式指令将#c，#container和left元素放在top中的一些javascript代码。< / p>

这样，元素甚至可以“反转”，即：#b可以是左边的第一个元素，#a可以是最后一个元素，具体取决于其他规则。

但是，这会失败，因为它们已从流中取出，因此#container的高度为空。很公平。

这似乎是impossible to solve this problem，所以我想到将position: relative用于子元素，但是这样做，left和top样式指令现在引用了初始元素的位置，不再可用......

您是否曾经遇到类似情况？我该怎么做才能达到预期的行为？

非常感谢。

P.S：对于那些不知道为什么我们不使用<table>元素来表示一个表格的人，我们可以说我不知道但是对这个决定没有权力......

Answer 1

有两件事情可以想到 - 既有hacky又可能不具备超级可扩展性：

1）不要在CSS中添加position: absolute但是在JS中 - 但在此之前，将容器固定到其绝对前的偏移尺寸，这样高度不会丢失

var container = $('#container');
container.height(container.height()).children().css('position', 'absolute');

2）使用position: relative，但相对于原始位置设置新位置减去偏移量。

var el = $('#some_el');
el.css({top: 0 - el.position().top});

是否可以使用`position：relative`来模拟元素的`position：absolute`位置？

1 个答案: