与动态高度（流体布局）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

回答

相关问题