如何停止向上移動div內容的定位標記

我遇到了一個奇怪的問題，錨定標記向上移動了div，導致了很多頭痛，但由於混合中有很多不同的片段，不知道是哪一個造成了這個問題。我正在嘗試構建一個UI，該UI使用jQuery UI庫中的模式對話框來顯示水平手風琴風格菜單。代碼的基本格式如下：如何停止向上移動div內容的定位標記

<div id="identifier" class="profilePanel"> 
    <ul> 
     <li> 
     <div class="card"> 
      <div class="header"><h1>Header</h1></div> 
      <div class="content"> 
       <!--Content goes here! --> 
      </div> 
     </div> 
     </li> 
     <li> 
     ... 
     </li> 
    </ul> 
</div>

每張卡片設計，當你點擊它當前擴展卡的寬度縮小和新卡生長在寬度。這一切都是在jQuery的輔助下完成的。每張卡片額外的內容通過溢出隱藏：隱藏在CSS中，並且只有卡片中的頭部div在收縮時可見。有關CSS如下：

ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 

div.profilePanel { 
    display: none; 
} 

div.profilePanel li { 
    float: left; 
} 

div.profilePanel li div.card { 
    overflow: hidden; 
    height: 375px; 
    width: 30px; 
    background-color: #e0f3fb; 
    padding: 0px 2px 2px 0px; 
} 

div.profilePanel li p { 
margin: 0; 
padding: 0; 
display: block; 
margin-left: 35px; 
} 

div.header { 
    border-width: 1px; 
    border-style: solid; 
    border-color: red; 
    display: block; 
    float: left; 
    width: 30px; 
    height: 100%; 
    cursor: pointer; 
} 

div.content { 
    padding: 5px 10px; 
    height: 365px; 
    overflow: auto; 
} 
div.content li { 
    display: block; 
    float: none; 
} 

h1 { 
    float: left; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    direction: rtl; 
    font-size: 14pt; 
    margin-top: 5px; 
    white-space: nowrap; 
    width: 30px; 
    text-align: center; 
    overflow: visible; 
}

預期現在，如果內容div包含無錨標籤（即我可以帶錨標籤，並將其重命名爲跨度，以獲得正確的格式，如果沒有的功能。）菜單顯示。每個標題佔用整個卡片大小，並且所有內容都在卡片中正確格式化。但是，如果content div包含定位標記，則頁面上的標題和內容div都會向上移動。使用螢火蟲，我可以知道卡div實際上沒有移動，但標題和內容。由於這是一個模態對話框，我認爲它與此有關，但無論我將它拖到哪裏，兩個div似乎都會相對於對話框的位置發生偏移。

來源

2010-08-31 Shawn D

你有'a'設置爲'display：block'在css的其他地方或類似的東西嗎？ – prodigitalson 2010-08-31 15:20:01

不，我確實嘗試過，但爲了糾正它，我把它拿出來了，因爲它什麼都沒做。 – 2010-08-31 17:45:36

首先，我假設你的HTML中的某個地方有一個帶有一個profilePanel類的DIV。

我也假設有沒有影響錨點的位置，即任何CSS規則{邊距：20像素;}

現在，我可以在這裏錯了，可是我覺得你使用的是錯誤的CSS屬性。我認爲最好使用display：none而不是溢出。顯示：在溢出時，無字面隱藏元素：隱藏只隱藏超過其大小的元素的內容。

但是，沒有看到JavaScript，我不能告訴你真正的問題是什麼。

來源

2010-08-31 15:48:09 Moses

我在那裏有profilePanel div。我會用信息更新原文。這是第一個div。手動隱藏和顯示JavaScript中的內容div似乎解決了這個問題，但我還沒有拿出溢出行，所以我會看到當我這樣做時會發生什麼。但目前來看，問題已經解決。謝謝！ – 2010-08-31 17:45:05

如何停止向上移動div內容的定位標記

回答

相關問題