我很难让 BigCommerce 主题中的按钮垂直对齐到底部。由于它是一种响应式设计,因此绝对定位并不能完全完成工作。不幸的是,它似乎是唯一能移动按钮的东西;我已经尝试了各种具有相对位置的方法,并且垂直位置不会让步。这些产品似乎列在一个充当表格的列表中。
这是按钮本身的CSS。我在“边框”下方添加了内容,并尝试了许多不同的方法,并尝试将显示更改为内联 block 。
.product-grid .ProductActionAdd .button {
display:block;
background: #424546;
border: 1px solid #303334;
position: relative;
vertical-alignment:bottom;
bottom:0;
}
我也可以为其他部分提供 css。以下基本上是我要修复的内容。那些只有 1 行产品名称的产品会将“有货”按钮上移。
最佳答案
没有完整的 HTML/CSS 或 jsFiddle我很难为您提供完整的 HTML/CSS 解决方案,但可以通过以下方式解决问题:
- 将按钮和描述包装在一个元素内,并在该包装元素上设置
position:relative
- 为按钮提供以下样式:
position: absolute; margin : 0 auto ;左:0;右:0;底部:5px;
- 将描述设置为固定高度,并为包装器指定固定高度
这应该可以解决您的问题。 Here's an example
关于css - 响应式设计中按钮的垂直定位不会移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24315022/