3

我正在尝试相对于它之前的元素 2 个元素（图片）定位一个元素（一个按钮）。图片和按钮之间有不同数量的文本。看看我的网站：

http://gorilla-gym.com/product-category/fitness-attachments/

我想要实现的是让每个产品列表的“立即购买”按钮水平对齐，无论图片下方有多少文字。

在我看来，以这种方式将按钮相对于图片定位是最合乎逻辑的方法，但我不知道如何做到这一点。让我知道你们是否知道如何做到这一点，或者是否有更好的方法来实现我想做的事情。

提前致谢。

4

4 回答 4

1

检查这个我想你想要这样的东西

http://jsfiddle.net/FWzzR/1/

css

ul.products { 
    display:table; 
    width:100%; 
    table-layout:fixed; 
    border-collapse:separate; 
    border-spacing:10px; 
}

.products > li { 
    background-color: #4F81BD; 
    border:2px solid #385D8A; 
    position: relative; 
    width: 22.05%; 
    display: table-cell; 
    padding:10px; 
    padding-bottom:50px; 
    text-align:center; 
    vertical-align:top; 
}

.products > li >a { 
    display:block; 
}

.products a.button { 
    position:absolute; 
    bottom:10px; 
    left:50%; 
    margin-left:-40px; 
    font-size: 100%; 
    line-height: 1em; 
    cursor: pointer; 
    text-decoration: none; 
    padding: 6px 10px; 
    font-family: inherit; 
    font-weight: bold; 
    color: #FFF; 
    text-shadow: 0 1px 0 #FF6311; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); 
    border: 1px solid #973100; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    background: #FD5200; 
    background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100)); 
    background: -webkit-linear-gradient(#FD5200, #CA4100); 
    background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%); 
    background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%); 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1); 
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1); 
}
于 2013-04-24T16:54:38.167 回答
0

如果图片下方有不同数量的文本，则元素的高度都将不同，您无法将“立即购买”按钮水平对齐图片下方。完成此操作的唯一方法是确保所有 div 的高度相同，然后您只需将 shop now 按钮定位如下：

<div class="shop-now-div">
 <img src="yourimage.jpg">
 Lorem ipsum....
 <a class="button" href="#">Shop Now</a>
</div>


.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }

有两种方法可以使您的 div 高度相同 1) JavaScript（不推荐，这很痛苦） 2) 表格（在 CSS 中执行，这样您就不会弄乱语义）

不幸的是，一些现代浏览器（Firefox，我相信）将不支持 position: relative 在表格单元格（您将需要）上，因此您不得不使用 JS 来使您的 div 具有相同的高度......

最简单的解决方案：将您的立即购买按钮贴在图像顶部 - 这样您就可以轻松地将它们水平对齐。:)

于 2013-04-24T17:11:51.563 回答
0

如果您只想将底部的“立即购买”按钮居中对齐，那么

.shopnow_button{
  display: block;
  margin: 0 auto; //something was overriding so I had to do !important here
  width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
于 2013-04-24T16:57:27.983 回答
0

这个问题在这里得到更好的回答How to set relative position with Grandfather！元素？只需在祖元素上设置位置：相对，在主题元素上设置位置：绝对。

该解决方案确实依赖于中间元素上没有定位设置。

于 2020-06-26T16:52:10.697 回答