CSS位置僅在div容器

絕對我已經創建瞭如下的jsfiddle來說明我的問題：http://jsfiddle.net/wGFbc/CSS位置僅在div容器

我有一組包含一個div內DL的的。它們幾乎顯示爲一組標籤，但結構上它們是dl的 - （我不能不幸地改變它）。

<div id="container"> 
    <dl> 
     <dt> 
      Color 
     </dt> 
     <dd> 
      <ol> 
       <li> 
        <a href="#" title="Blue">Blue</a> 
       </li> 
       <li> 
        <a href="#" title="Red">Red</a> 
       </li> 
       <li> 
        <a href="#" title="Green">Green</a> 
       </li> 
      </ol> 
     </dd> 
    </dl> 
    <dl> 
     <dt> 
      Price 
     </dt> 
     <dd> 
      <ol> 
       <li> 
        <a href="#" title="100">100</a> 
       </li> 
       <li> 
        <a href="#" title="200">200</a> 
       </li> 
      </ol> 
     </dd> 
    </dl> 
</div>

每個DL> DD被定位絕對向左所以內容總是與所述容器的左側齊平，並且不與DL（水平排列狀突片）的左側齊平。

默認情況下，dd內容處於隱藏狀態，單擊類似dt的選項卡時，每個內容都可見。

複雜的是，因爲dd是絕對位置，它溢出了容器，並沒有改變它下面的元素的位置。有沒有一些CSS技巧，我可以用這裏得到我想要的效果而不改變標記？

來源

2013-05-18 Marty Wallace

我覺得你不能用css來做，因爲你有'position：absolute'，這使得容器無法獲得有關子元素高度的信息。你可以使用jQuery嗎？如果是的話，檢查這個答案http://stackoverflow.com/questions/7321281/css-position-absolute-container-height-problem –

你可以用javascript/jquery獲得dls的高度。然後保存具有最高高度的dl的值，並將#container div上的高度設置爲。

每次dl更改時，您都必須運行此函數。希望我正確理解了這個問題。

來源

2013-05-18 11:18:44 Andreas

是的，你已經明白了。雖然我希望有一個css解決方案，但我幾乎肯定不可能，但認爲我會提出這個問題 –

是的，我認爲只用CSS就很困難，不能用任何解決方案來實際使用CSS。抱歉。 – Andreas

-1

嘗試增加：

dl { 
    float: left; 
    margin-right: 10px; 
    position: relative; /* this */ 
}

這是你想要的嗎？ http://jsfiddle.net/wGFbc/2/

來源

2013-05-18 11:22:32

不幸的是，因爲這會使dd與dd保持一致。 dd需要與父容器div保持一致 –

CSS位置僅在div容器

回答

相關問題