帶有右側定位的彈出式列表不會留在容器內

我有一系列視覺形成列表的帖子標題。將鼠標懸停在列表中的某一行上時，包含帖子內容的<div>在該行的右邊緣變得可見，其行爲類似於彈出菜單。這個飛出物<div>比行（在大多數情況下）具有更高的高度。它的高度也是可變的，所以它不可預測。帶有右側定位的彈出式列表不會留在容器內

See here。滾動到底部。

因爲此彈出窗口<div>絕對位於其父項的右側，因此可實現所需的彈出效果。

但是，如果您滾動至列表底部，則可以看到最後一項延伸至#schedule-section-container邊框的下邊緣以下。我想用最乾淨的方式來糾正這個問題。

我知道這是因爲定位。但是，有沒有一種方法可以在不猜測margin-bottom的情況下實現同樣的彈出效果？我想使用浮動，但我不知道如何獲得列表以保持短暫的高度，同時進行飛出。

來源

2013-04-08 Chris Montgomery

只需CSS這可能是一個有點棘手，但我認爲你正在尋找這是什麼：

.hentry:last-child > .entry-content { bottom: 0; }

將在最後一個子定位在底部而非頂部，獲得所需效果不超過容器的邊界。由於過去幾年實際已超出界限了一下，你也可以嘗試：第n-最後一個孩子從年底來算，這樣的：

.hentry:nth-last-child(1) > .entry-content { bottom: 0; } /* This is last child */ 
.hentry:nth-last-child(2) > .entry-content { bottom: 0; } /* Second to last */ 
.hentry:nth-last-child(3) > .entry-content { bottom: 0; } /* Third to last, etc */

可能需要一些更多的特異性添加到開始限制它到Wordpress在幾個地方使用.hentry這個頁面，但這應該給你一個很好的跳躍點。另外，如果需要較老的IE支持，您可能需要考慮使用Selectivzr

來源

2013-04-08 00:36:23 Andrew

工程出色，謝謝Andrew。我確實需要爲每一個添加聲明'top：inherit;'以覆蓋原來的'top：0;'。另外，我使用的實際選擇器是'body.slug-schedule＃schedule-section .hentry'，所以應該工作得很好。 :) – 2013-04-08 00:56:42

帶有右側定位的彈出式列表不會留在容器內

回答

相關問題