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

时间:2014-06-19 19:43:20

标签: css responsive-design vertical-alignment

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

这是按钮本身的css。我添加了以下内容" border"并尝试了许多不同的方法,并尝试将显示更改为内联块。

.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

1 个答案:

答案 0 :(得分:0)

如果没有完整的HTML / CSS或jsFiddle,我很难为您提供完整的HTML / CSS解决方案,但是这里有什么可以解决问题:

  • 将元素内的按钮和说明换行并在该包装元素上设置position:relative
  • 为按钮指定以下样式:position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
  • 将描述设置为固定高度,并为包装器提供固定高度

那应该可以解决你的问题。 Here's an example