1

我必须开发一个生成表格（有点……）的软件，它必须提供对元素位置的完全控制。

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

<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>

还有一些 javascript 代码将#a,#b和#c元素放在#containerusingleft和topstyle 指令中。

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

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

用这种方式解决这个问题似乎是不可能的，所以我想用position: relativefor 子元素，但是这样做，leftand topstyle 指令现在引用了初始元素的位置，不再可用......

你有没有遇到过类似的情况？我能做些什么来实现所需的行为？

非常感谢你。

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

4

1 回答 1

1

有两件事浮现在脑海中——既老套又可能不是超级可扩展的：

1)position: absolute不要在 CSS 中添加，而是在 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});
于 2012-08-07T16:18:43.790 回答