Question

我一直试图解决这个问题，但没有运气。可能是一个我想念的简单解决方案。我正在使用包含4个特色产品的主页模板。特色产品最终呈现对角线，图像也与标题，价格和添加到购物车按钮重叠。如果有人可以提供帮助，那就太好了！

以下是该模板所在页面的链接：http://playground.krisyoungboss.com/home/ （稍后将更改首页显示）

如果有人需要比较，这里也是商店页面链接：http://playground.krisyoungboss.com/shop/

Thanks❤️

Answer 1

你已经收集了很多东西。

首先，事物显示对角线的原因是因为代码中有<pre>个元素。我怀疑你可能已经复制粘贴了一个短代码，并且这样做了他们用短信编码包裹的<pre>。

首先，首先在WP仪表板中编辑该页面，然后切换到text视图（编辑器区域右上角的选项卡）。寻找这个：

<pre class="brush: php; gutter: false">

找到并删除它（不要忘记删除结束</pre>标记。）

然后，您的图片掩盖以下内容的原因是因为样式表中的此声明（在样式表的第228行）：

img.wp-post-image {
    border: 5px solid #000000;
    border-radius: 5px;
    float: left;
    height: 300px;
    margin-bottom: 15px;
    margin-right: 10px;
    width: 300px;
}

float:left正在应用于特色部分中的图像，这会导致问题。此外，高度/宽度不好（虽然它们被其他样式覆盖）。

删除float:left，或添加这样的样式（在样式表中的上述样式之后）：

.woocommerce ul.products li.product a img, 
.woocommerce-page ul.products li.product a img {
    float: none;
}

最后，您的添加到购物车按钮太宽。你需要为它解决这些风格 - 它还会从父li元素中溢出。

特色产品重叠并显示对角线

1 个答案: