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

Question

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

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

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

谢谢❤️

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 元素中溢出。