Question

我在Stack Overflow上找到了一个很好的例子，并成功地使用它来为这个JSFiddle中的产品盒构建类似的布局我几乎逐字地将CSS和HTML复制到我的Wordpress blog和标题/描述/价格不再浮动在图像旁边，而是向下移动。

既然如此，我只能假设其他东西对我的自定义造型负有责任，但我不知道是什么。任何人都可以帮助指出我找到并解决问题的正确方向吗？

HTML：

<div class="info-container-left">
    [usrlist "Ease of Use:5" "Build Quality:5" "Features:4" "Price:5" "Overall:4.65" text=false]
    <div class="product-container">
        <div class="product-thumb"><img src="https://letsprint3d.net/wp-content/uploads/2017/05/cetus3d_base.png" /></div>
        <div class="product-content">
            <h3 class="product-title">
                 <a href="#">Cetus3D Printer</a>
                 <div class="product-price">$299</div>
            </h3>
            <p>Compact 3D Printer with a large build volume using a form follows function design.</p>
        </div>
    </div>
    <div class="product-container">
        <div class="product-thumb"><img src="https://letsprint3d.net/wp-content/uploads/2017/05/cetus3d_extended.png" /></div>
        <div class="product-content">
            <h3 class="product-title">
                 <a href="#">Cetus3D Extended</a>
                 <div class="product-price">$399</div>
            </h3>
            <p>Includes a longer Z-Axis, providing an extended build volume of 180x180x280mm.</p>
        </div>
    </div>
</div>

CSS：

.info-container-left {
    width: 50%;
    padding: 0 10px 0 0;
    float: left;
}
.info-container-right {
    width: 50%;
    padding: 0 10px 0 0;
    float: right;
}

.product-container {
    margin: 10px 20px 0 0;
    padding: 10px;
    border: 1px solid #eee;
    width: 100%;
}
.product-thumb {
    float: left;
}
.product-thumb img {
    display: block;
}
.product-content {
    margin-left: 90px;
}
.product-title {
    font-weight: bold;
    font-size: 100%;
    margin-top: 0;
}
.product-title a {
    text-decoration: none;
}
.product-price {
    float: right;
}

正确布局（JSFiddle）：

布局损坏（My Website）：

Answer 1

更改此css

.product-container {
    border: 1px solid #eee;
    margin: 10px 20px 0 0;
    overflow: hidden;/*Add This Property*/
    padding: 10px;
    width: 100%;
}
.product-content {
    float: left;
    /*margin-left: 90px;*/ /*Remove This*/
    width: calc(100% - 100px);
}

Answer 2

原因是在小提琴上工作但不在你的网页上是因为Wordpress css默认情况下在标题（h1，h2 ...）和你的clear:both上使用product title是一个h3标题。只需将其更改为div（我推荐此选项）或添加：

.product-title {clear:inherit}

将文本浮动到图像的右侧

2 个答案: