CSS - 位置：绝对表现奇怪且移动元素

Question

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

我的解决方案：

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

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

  bottom：0;

  职位：绝对;

除了一个问题外，这个工作有效： 如果产品标题仅占用一行，则“阅读更多”按钮会突破容器：

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

我的修复方法是在每个按钮上添加“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;
}

当试图避免重叠等时，它会特别避免头痛。

Answer 2

相信我可以跟随你对最小高度和绝对位置的想法......

// Only problem is, you also need a media query now :s
.bpgPhoto {
    ...
    min-height: 200px; // so scratch that
    padding: 50%; // this is the responsive embed technique
}

.boldPhotoBox {
    ...
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
}

.boldPhotoBox .bpbItem,
.boldPhotoBox .bpbItem .btImage {
    ...
    height: 100%;
}

// since the images differ in height, 
// and you want to keep their aspect ratio, 
// I'd suggest to add the border on the image class, rather than the `img` tag itself.
.boldPhotoBox .bpbItem .btImage {
    border: 1px solid rgba(0,0,0,.07);
}

.btLightSkin.woocommerce-page .product img {
    border: none;
}

Bootstrap对responsive embed technique的更多信息，但是，我已经使用了很多年了...... pfuh ^^