如何在div中的单行中保留文本和图像？

I am trying to put title and content in a div vertically parallel to image div, My jsfiddle . But when ever the text content length in increasing the image is coming in next line.

我试图将标题和内容放在垂直平行于图像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>

I want the text to take all the sapce when there is no image.

我想要文本在没有图像的情况下采取所有措施。

5 个解决方案

#1

U can try add 'width' and 'float: left' on < p > tag, something like this:

您可以尝试在

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


}

if u want to make it responsive, you should change your html structure and apply something like this:

如果你想让它响应，你应该改变你的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>

#2

I believe that using display: flex would be the best approach here.

我相信使用display：flex将是最好的方法。

Here is a great article on flex -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是关于flex的一篇很棒的文章 - > https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Find bellow your html code with 2 lines of css. :)

用2行css查找你的html代码。 :)

.sub-category-content{
   display: flex;
   align-items: flex-start;
}
 
.sub_category_card__content{
    margin-right: 10px
}

.sub_category_card__content h2 {
    margin: 0;
}

.product_post__thumbnail > img {
    height:  75px;
    width: 75px;
}

<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://perronelawpc.com/cscheader.png">
      </div>
    </div>
  </a>
</div>

#3

This can be achieved generally by simply placing the image inside of the paragraph tags.

这通常可以通过简单地将图像放在段落标记内来实现。

<p>Hello, this is some text.
<img src="https://s-media-cache-ak0.pinimg.com/736x/5a/3f/28/5a3f2813a332b8aefdca5069a2ec7b50.jpg" width="100px" />
</p>

https://jsfiddle.net/vnnf7yxz/

#4

Try to get your divs to float left or right.

尝试让你的div向左或向右浮动。

For example:

例如：

`<div style="width: 100%; border: 1px solid red;">
<div style="width: 100%; border: 1px solid red;"> link</div>
<div style="width: 100%; border: 1px solid red;"> 
Title
<div>
<p>
<div style=" width: 25%; border: 1px solid red; float: right;.">Pic </div>
<div style=" width: 50%; border: 1px solid red; float: Left;">Text </div>
</p>
</div></div>
</div>`

#5

Finally achieve it.

终于实现了它。

    <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="product_post__thumbnail">
                        <img src="http://localhost/ahlihukum2/wp-content/uploads/2016/09/criminal-defense-150x135.png">
                    </div>
                                                <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>
    </a>
</div>

and css-

和css-

   .card--sub-category.card--product-sub-cat {
    margin: 30px 10px 30px 10px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
}
.sub-category-content {
    overflow: auto;
    padding-left: 0;
    font-weight: normal;
}
.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);
}
.sub-category-title {
    font-size: 1rem;
    font-weight: bold;
    color: #484848;
    margin-bottom: 4px;
    padding: 0;
}
.sub-cat-description .category-desc {
    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    display: block;
    font-size: small;
    color: #919191;
}

jsfiddle of my working version

我工作版的jsfiddle

#1