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

Question

我试图将标题和内容放在与图像 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>

当没有图像时，我希望文本占据所有空间。

Answer 1

你可以尝试在

标签上添加 '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>