CSS - 位置 :absolute behaving strangely and moving elements

Question

我有一个 WooCommerce store并且正在更改显示所有产品的页面。这是一个糟糕的主题 - 每个产品的“阅读更多”按钮没有对齐，如果超过一行，它们会被标题移动:

我的解决方案:

• 将每个产品所在容器的最小和最大宽度设置为相同的值，使它们的高度都相等

• 在每个按钮上放置以下 CSS:

  底部:0；

  position:absolute；

除一个问题外，这行得通:在产品标题只占一行的情况下，阅读更多按钮会从容器中脱离出来:

我想知道为什么会发生这种情况，然后，为什么只有当标题只有一行时才会发生这种情况？

我的解决方法是在每个按钮上也添加“float: left”，但这让它移动的有点太远了，我必须用“margin-left”来纠正这个问题。

有关更好的方法的建议以及问题发生的原因，将是非常棒的!

干杯。

Answer 1

如果您可以使用 flex(see this 以获得浏览器支持)，我强烈建议您使用 position:absolute，因为它很简单，尤其是对于网站的响应版本。

这是您可以使用的 CSS3(删除绝对值后):

.woocommerce ul.products li {
    display: flex;
    flex-direction: column;
}

/**
 * flex-grow: 1; will make the header 'grow' as large as
 * possible to fit the available space and 'push' the link
 * down to the bottom.
 */
.woocommerce ul.products li header {
    flex-grow: 1;
}

.woocommerce ul.products li > a {
    text-align: center;
}

在试图避免重叠等问题时尤其会避免头痛