Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我希望文本在没有图像的情况下获取所有文本。

Answer 1

你可以尝试添加＆＃39;宽度＆＃39;并且＆＃39;浮动：左＆＃39; on＆lt; p>标签，像这样：

.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结构并应用这样的东西：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

用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>

Answer 3

通常只需将图像放在段落标记内即可实现。

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

Answer 4

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

例如：

`<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>`

Answer 5

最后实现它。

    <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>

和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

如何将文本和图像保存在div中的一行中？

5 个答案: