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

时间:2017-08-10 22:46:22

标签: css wordpress woocommerce

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

enter image description here

我的解决方案:

  • 将每个产品所在容器的最小和最大宽度设置为相同的值,使它们全部等高
  • 在每个按钮上放置以下CSS:

    bottom:0;

    职位:绝对;

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

enter image description here

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

我的修复方法是在每个按钮上添加“float:left”,但这有点太过分了,我必须用“margin-left”来纠正它。

建议更好的方法,以及问题发生的原因,这太棒了!

干杯。

2 个答案:

答案 0 :(得分: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;
}

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

答案 1 :(得分:0)

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

// 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 ^^