CSS对齐按钮

Question

为什么我网站的前两行会像这样加载，而底行是否完美？

底行：

HTML：

https://gist.github.com/1228291

CSS：

https://gist.github.com/1228301

Answer 1

这实际上取决于您希望如何实现垂直对齐。例如，你可以尝试类似的东西：

.product-grid .name { height: 40px; }

但是当标题只有一行时，这会在标题和价格之间留出一些空白。

Answer 2

在我看来它已经关闭，因为顶行中的“单元格”具有跨越两行的项目名称（因此按下这些项目的按钮）。使用底部的“单元格”，上面的图像看起来使它们足够宽以至于项目名称适合，如果不是这样的话，该行也会遇到同样的问题。您可以尝试将名称设置为具有特定高度（如@brianreavis建议的）或者可能在名称中添加不间断空格（ ）而不是常规空格会强制名称div推出侧面。

<小时/> 另外，您不必在CSS选择器中使用两个ID（除非您出于特殊原因这样做）。由于ID对整个文档而言是唯一的，因此只需调用#welcome而不是#header #welcome即可。

Answer 3

因为您的产品标题有不同的行数。

也许这种结构可以激励你： http://jsfiddle.net/JeaffreyGilbert/EW6Ax/