浮动文本到图像的右侧

Question

我在 Stack Overflow 上找到了一个很好的例子，并成功地使用它为这个 JSFiddle I copied the CSS and HTML almost verbatim to my Wordpress blog 中的产品框构建了类似的布局并且 title/description/price 不再浮动在图像旁边但再往下。

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

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">9</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">9</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

之所以在 fiddle 上工作但在您的网站上不起作用是因为 Wordpress css 默认情况下在 header 上使用 clear:both (h1 , h2...) 而你的 product title 是一个 h3 header。只需将其更改为 div（我推荐此选项）或添加：

.product-title {clear:inherit}

浮动文本到图像的右侧

Floating text to the right side of image

html

css

wordpress

css-float