具有絕對定位元素的等高柱

我有一個無序列表，它有一些內容和一個按鈕。列（LI）不總是相同的高度，但我希望按鈕始終位於底部。我正在使用display：table/display：table-cell技巧來保持LIs的高度相同，但我無法使按鈕正確對齊。我想要底部的按鈕，但我也希望它的行爲與內容一樣。含義我希望它居中並在瀏覽器調整大小時更改它的寬度。具有絕對定位元素的等高柱

下面是演示該問題的小提琴。

http://jsfiddle.net/mattymess/BBuqY/

這是代碼顯示我是如何做的高度相等的一個片段：

.rewards .rewards-chooser { 
    margin: 0; 
    border-top: 2px solid #f4f4f4; 
    border-bottom: 2px solid #f4f4f4; 
    display: table; 
    width: 100%; 
    position: relative; 
} 
.rewards .reward { 
    width: 25%; 
    border-left: 2px solid #f4f4f4; 
    list-style: none; 
    display: table-cell; 
}

來源

2013-07-03 Matt Messinger

不會爲''.rewards .reward .redeem'改變'magin-left：-25％;'爲'margin-left：-50％;'爲你做這個嗎？除非我誤解了.. – Omega

變化position: absolute;到position: relative;在.rewards .reward .redeem類是這樣的：

.rewards .reward .redeem { 
    position: relative; 
    bottom: 0; 
    box-sizing: border-box; 
}

只是知識：你的按鈕是相對的東西（你的容器），一個並非絕對。

要設置按鈕在同一行中，您應該爲容器範圍定義一個高度。就像這樣：

.reward-description { 
    height: 200px; 
}

我爲你做了一個乾淨的例子。要看，click here (jsFiddle)。

來源

2013-07-03 17:59:06

此解決方案的問題是每個塊可能因內容不同而不總是相同的高度。如果只有兩行副本，我不想強制該塊的高度爲400像素。基本上，我希望所有的塊都像最高的塊一樣高，這將由其中的內容量來定義。這就是我使用'display：table-cell'的原因 –

具有絕對定位元素的等高柱

回答

相關問題