保持絕對div在小屏幕上可見

這很難描述，但我會盡我所能。保持絕對div在小屏幕上可見

我正在爲論壇製作模板。在每個線程中，這些帖子在彼此之下對齊。帖子居中。我想要一個包含用戶名，標題和帖子的div浮動到線程左側。圖片描述最好：http://nclabs.org/screenshots/stackoverflow.png。紅色箭頭指向我正在談論的div，紅線顯示了div的位置，沒有position: absolute。

問題是，因爲div是絕對定位的，當屏幕太小時，div會「脫落」頁面，而不是顯示滾動條。我意識到這是position: absolute的正常行爲。

當屏幕太小時，如何讓div浮動到（居中）文章的左側，而不會從頁面脫落？

這裏是一些CSS：

#wrapper { // the whole page is wrapped in this div 
    margin: 0 auto; 
    width: 900px; 
    position: relative; 
} 

#thread .threadauthor { // the divs containing the username, etc 
    position: absolute; 
    text-align: right; 
    margin-left: -7.5em; 
    margin-top: .5em; 
    left: 0; 
}

和HTML看起來像這樣：

<div class="threadauthor"> 
<div class="Webmaster">nightcracker</div> 
<div class="Webmaster"><small>Webmaster</small></div> 
<div class="postcount"><small>Posts: 24</small></div> 
</div> 

<div class="threadpost">

來源

2011-01-11 orlp

是否有任何具有css「overflow：hidden」屬性的父元素應用？ – amosrivera 2011-01-11 13:12:14

你是不是給你所有的HTML和相關的風格，所以直接回答這個問題很難。 .threadpost是固定寬度嗎？如果是這樣，那麼因爲.threadauthor是一個固定的寬度，以及（切緣陰性的是7.5em），你可以把它們放到同一個容器div這樣的：

<div class="post"> 
    <div class="author"></div> 
    <div class="body"></div> 
</div>

然後，您可以風格.author和.body成定點寬兩欄佈局，這裏的幾個選項做這件事（如果您搜尋他們有很多更多）：

給position: relative到.post，position: absolute到.author和margin-left等於.author的寬度.body。
向側邊浮動.author或.body。

這應該會給你更好的結果。

來源

2011-01-11 13:12:07 Jon

保持絕對div在小屏幕上可見

回答

相關問題