css - 响应式设计中按钮的垂直定位不会移动

Question

我很难让 BigCommerce 主题中的按钮垂直对齐到底部。由于它是一种响应式设计，因此绝对定位并不能完全完成工作。不幸的是，它似乎是唯一能移动按钮的东西；我已经尝试了各种具有相对位置的方法，并且垂直位置不会让步。这些产品似乎列在一个充当表格的列表中。

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

.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

Answer 1

没有完整的 HTML/CSS 或 jsFiddle我很难为您提供完整的 HTML/CSS 解决方案，但可以通过以下方式解决问题:

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

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