响应式设计中按钮的垂直定位不移动答案

【问题标题】：Vertical positioning for button in responsive design doesnt move响应式设计中按钮的垂直定位不移动
【发布时间】：2014-08-10 11:43:40
【问题描述】：

我在将 BigCommerce 主题中的按钮垂直对齐到底部时遇到了很多麻烦。由于它是响应式设计，因此绝对定位并不能完全完成工作。不幸的是，它似乎是唯一可以移动按钮的东西。我尝试了各种相对位置的方法，垂直位置不会让步。产品似乎列在一个用作表格的列表中。

这是按钮本身的 css。我在“边框”下面添加了东西，并尝试了许多不同的方法，并尝试将显示更改为内联块。

.product-grid .ProductActionAdd .button {
 display:block;
 background: #424546;
 border: 1px solid #303334;
 position: relative; 
 vertical-alignment:bottom;
 bottom:0;

 }

我也可以为其他部分提供 css。下面基本上是我要解决的问题。那些具有 1 行产品名称的产品的“有货”按钮会向上移动。

image of buttons and problem

【问题讨论】：

这个vertical-alignment应该是vertical-align，只是为了更正语法，这并不能解决你的问题
在 jsFiddle 或类似文件中发布您的 HTML...
@Huangism 是正确的，即使那样它也只能在 table>table-cell 或 block>inline-block 我相信。
我发布的答案不起作用吗？
jsfiddle.net/YJ8tq 这是 sn-p 和 css。如您所见，html 主要涉及引用其他文件。

标签： css responsive-design vertical-alignment

【解决方案1】：

如果没有完整的 HTML/CSS 或 jsFiddle，我将很难为您提供完整的 HTML/CSS 解决方案，但以下是解决问题的方法：

将按钮和描述包装在一个元素内，并在该包装元素上设置position:relative
为按钮指定以下样式：position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
将描述设置为固定高度，并为包装器提供固定高度

这应该可以解决您的问题。 Here's an example

【讨论】：

刚刚尝试过，它实际上将所有按钮缩小到 2px 宽的垂直线。这是 html 和 css：jsfiddle.net/YJ8tq