定位兄弟元素一个在另一个

我有一个TABLE多行。在每一行内的TD元件中的一个包含几个DIV元素：定位兄弟元素一个在另一个

可具有任何尺寸，但所有这些（一个TD内）具有相同的像素尺寸
已经对的顶部被定位一个其它含TD需要根据子DIV元件
一个DIV来调整
将在时间（静态）
从一个改变时，所显示到另一衰落将使用（因此其中两个将被同时显示的）
绝不会有2其中超过显示在同一时间

这是这样一个简单的例子表

<table> 
    <tr> 
     <td>Name</td> 
     <td> 
      <div>First</div> 
      <div>Second</div> 
      ... 
      <div>Last</div> 
     </td> 
     <td>Additionals</td> 
    </tr> 
    <tr> 
     <td>Name</td> 
     <td> 
      <div>First</div> 
      <div>Second</div> 
      ... 
      <div>Last</div> 
     </td> 
     <td>Additionals</td> 
    </tr> 
    ... 
</table>

明显的解决方案是设置

div 
{ 
    position: absolute; 
}

这将自动地定位在EA的顶部DIV元件其他（根据流程布局），但TD维将保留，就好像它不包含子元素。溢出不会做任何事情，因为子元素是绝对定位的。

td 
{ 
    overflow: auto; 
}

我该如何做这项工作？

来源

2011-04-20 Robert Koritnik

您是否事先知道div的大小？如果是这样，你可以只给一个包装DIV的尺寸：

<td> 
    <div class="wrapper"> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
    etc...

如果不将不知道大小，那么，既然你已经使用JS，你可以抓住的第一个孩子的大小包装的div，然后通过JS设置包装尺寸。

UPDATE：

我能想到用CSS全部由自己做这将有第一个DIV渲染两次的唯一途径。第一个实例设置为position：relative，然后它是重复的，就像其余的一样，可以设置为position：absolute。这个克隆就像一个垫片。你可以设置可视性：隐藏如果你想确保它不会以可视方式显示（但仍占用适当的空间）。但是，这样做的缺点是，您现在在您的网页上有内容重复，这可能不是来自搜索引擎优化和/或可访问性POV的理想选择。

我可能会去JS路线，并获取页面加载后的尺寸。

来源

2011-04-20 01:50:17

1：不，我不知道服务器端的'div'元素的大小，所以我可以设置容器大小。 2：我试图避免onReady脚本。但是除了这两个之外还有别的方法吗？ – 2011-04-20 02:06:38

我更多的想法更新了我的答案。 – 2011-04-20 13:30:50

我接受了你的回答。你的*重复*方法是我可以实际使用的方法。但不是完全重复'div'，我可以渲染一个简化的元素，它将具有正确的大小，但省略其大部分子HTML内容。谢谢。 – 2011-04-21 21:01:14

定位兄弟元素一个在另一个

回答

相关问题