與動態高度（流體佈局）div divs的錶行之間的對齊-css

我正在一個移動網站，它有一個流體佈局。在主頁上，我有一張包含少量產品的表格。
每個產品有3個div：product-image，product-name和prices-container。
我似乎無法弄清楚如何在整個錶行中水平對齊prices-container div。
我在想這個問題會有2種方法：或者product-name總是佔用整個表格行的最高product-name的高度，或者prices-container總是粘在我的產品表格單元格的底部。似乎無法弄清楚如何應用任何。與動態高度（流體佈局）div divs的錶行之間的對齊-css

Here是這個問題的一個例子。
左圖顯示了我的問題，右圖顯示了我希望如何。

如果product-name的高度固定，這不會成爲問題，但由於這個文本是動態的，所以我不知道它會有多高。可能是一行文字，可能是10行。我創建了一個CodePen，在這裏你可以檢查我的代碼和問題>>here < <（我知道它看起來很醜，使用背景顏色找出更快的發生）。
我使用Jade作爲我的HTML和Stylus作爲我的CSS。

限制：
- 必須是CSS僅& HTML，我不會使用Javascript
喜歡 - 溶液必須適合於流體佈局（寬度被設定爲百分比）
- 不能使用的product-name的固定高度，這是一個動態文本

任何想法如何做到這一點？謝謝！ :)

來源

2013-12-19 Alex

設置最小高度或將您的4個按鈕放在'底部：0'？ – kevpoccs

它在我的電腦上完美工作。我正在使用Chrome。 –

@kevpoccs：使用'min-height'只會在某些情況下起作用。我需要一個通用的解決方案，無論文本將在該div中。我也試過'bottom-container'上的'bottom：0'，我沒有看到任何改變。 – Alex

add vertical-align:bottom; css風格到.box1類。同樣，爲.box4 css類添加相同的樣式。謝謝，

來源

2013-12-19 15:04:14

我嘗試了你的建議。它確實將整個表格行的「底部容器」對齊，但是它帶來了另一個問題。 '.box1'和'.box4'中的所有內容都被移動到底部對齊，這意味着'product-image' div也會向下移動，現在會導致整個表格行上的'product-image'之間的對齊錯誤。所以我不能使用這個解決方案。而且，我需要一些能夠工作的東西，不管每個'product-name'中的文本數量是多少，而不僅僅是在這個特定的情況下。（要添加到所有'.box'類的東西 - 與你的答案有關）。 – Alex

與動態高度（流體佈局）div divs的錶行之間的對齊-css

回答

相關問題