html - 如何在div内的一行中保留文本和图像？

我正在尝试将标题和内容放在垂直于图像div的div中，
我的jsfiddle。但是，每当增加图像内容的文本内容长度出现在下一行时。

.archive .woocommerce-product-page .grid {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 20px;
}
.card--sub-category.card--product-sub-cat {
    /* display: table; */
    margin: 30px 10px 30px 10px;
    /* background: #ffffff; */
    /* width: 100%; */
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
.sub-category-content {
    /* height: 100%; */
    overflow: auto;
}
.sub_category_card__content {
    /* padding-left: 10px; */
    padding-left: 0;
    font-weight: normal;
    /* float: left; */
}
.sub-cat-description .category-desc {
    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    display: block;
    font-size: small;
    color: #919191;
}
.product_post__thumbnail {
    float: right;
}
.product_post__thumbnail img {
    height: 75px;
    width: 75px;
    border-radius: 3px;
    vertical-align: bottom;
    border: 1px solid rgba(0, 0, 0, 0.075);
}

<div class="card--sub-category card--product-sub-cat">
    <a href="http://localhost/ahlihukum2/product-category/business/contracts-and-agreements/" class="sub-cat-page-link">
                        <div class="sub-category-content">
            <div class="sub_category_card__content">
                                <div class="sub-cat-title">
                    <h2 class="sub-category-title">
                            Contracts and Agreements                    </h2>
                </div>
                                <div itemprop="description" class="sub-cat-description">
                    <p class="category-desc">Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs Review or create business contracts, review of employment contracts, consulting agreements and NDAs</p>
                </div>
                            </div>
                        <div class="product_post__thumbnail">
                <img src="http://localhost/ahlihukum2/wp-content/uploads/2016/09/criminal-defense-150x135.png">
            </div>
                    </div>
    </a>
</div>

我希望文本在没有图像的情况下占据所有的空间。

最佳答案

您可以尝试在

标签上添加'width'和'float：left'，如下所示：

.sub-cat-description .category-desc {

    float: left;
    width: 200px;

    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    display: block;
    font-size: small;
    color: #919191;


}

如果您想使其具有响应性，则应更改html结构并应用如下内容：

#img_container{
  position: relative;
  float: right;
  width: 150px;
  height: 135px;
  padding: 0px 0px 12px 12px;
}

<div>

<p>
  <div id="img_container"><img src="http://localhost/ahlihukum2/wp-content/uploads/2016/09/criminal-defense-150x135.png"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula erat augue, non mattis enim pretium non. Morbi sed purus a erat condimentum finibus et a diam. Quisque eleifend felis a pretium lobortis. Aenean eu porta libero. Donec nec ante in felis condimentum dapibus. Nam tincidunt mauris imperdiet posuere ullamcorper. Nam suscipit ex nulla, et ullamcorper ligula lacinia et. Nunc et nulla nunc. Sed vestibulum mi mauris, ut commodo urna porttitor id. Sed quis maximus elit.
</p>

</div>