html - float 文本到图像的右侧

Question

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

在这种情况下，我只能假设其他原因破坏了我的自定义样式，但我不知道是什么。谁能帮我指明正确的方向以找到并解决问题？

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);
}