Question

您好

在我们的网站上，我有一个页面，其中有“立即购买”按钮

https://www.nutricentre.com/m-300-herbs-hands-healing.aspx

控制它的样式是

.item .price {
    color:#8c9c54;
    font-size:14px;
    font-weight: bold;
    /*    
        position: absolute;
        bottom: 48px;
        left: 0px;
        width: 150px; 
    */
    text-align: center;
    margin-bottom: 45px;
}


.item a.blue_btn {
    position: absolute;
    bottom: 10px;
    left: 15px;
    cursor: pointer;
}

无论上面的文字如何，我都知道如何让它在一条直线上对齐？

Answer 1

您不必更改按钮的CSS，而是从整个项目：只需添加：

.item{
    height: 380px;
}

当然，您必须关心最大物品高度：您的价值不能低于此值，否则价格将不再可见。

在这种情况下，min-height将是更好的选择。

Answer 2

我建议为最简单的解决方案设置min-height: 370px;。

你不想为此设置一个静态高度，因为如果你有一个具有更长描述的项目，它将不会自动添加空间，而只是填入所有内容。

Answer 3

为.item添加静态高度

height:375px;

身高：自动;声明告诉.item扩展到适合所有内容所需的大小，所以div的顶部排列，但由于它们是不同的高度，底部是错开的。

正如我的一些共同响应者所指出的那样，min-height也是一个可接受的选项，直到你有一个项目有足够的文本，项目扩展超过最小高度值，此时它们将开始扩展和交错试。

Answer 4

这应该指向正确的方向：http://jsfiddle.net/v9grm/

创建一个网格，并在display: table的帮助下使列的高度相同。然后使用position: absolute将按钮放在列的底部。

自动对齐按钮

4 个答案: