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

我有一個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

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

回答

相關問題