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

Question

我在BigCommerce主题中的按钮垂直对齐到底部有很大的困难。由于它是一个响应性的设计，绝对定位不能完全完成工作。不幸的是，它似乎是唯一能移动按钮的东西；我尝试过各种相对位置的方法，并且垂直位置不会移动。这些产品似乎列在作为表的列表中。

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

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

 }

我也可以为其他部分提供css。下面是我想要解决的问题。那些有1行产品名称的人会让"in stock“按钮向上移动。

按钮图像与问题

Answer 1

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

• 将按钮和描述包装在元素中，并在该包装元素上设置position:relative。
• 将按钮设置为以下样式：position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
• 将描述设置为固定的高度，并使包装器具有固定的高度。

这应该能解决你的问题。下面是一个例子