如何大小的段落与图像相同的高度

Question

试图使段落的大小与右图的大小相同。目前是段落的底部更改大小，但顶部是固定的

带玩具车的孩子

CSS代码是

.kid{
    display: flex;
    position: relative;
    float: right;
    height: auto;
    max-width: 50%;
}


.paragraph{
    display: flex;
    margin-right: 50%;
    font-size-adjust: auto;
    background-color: #3498db;
    color:white;
    font-style: italic;
    font-weight: bold;
}

，我的HTML代码是

<div>       
<img class = "kid" src="kid%20playing%20toy%20pic.jpg">
</div>      
    
       
<div class = "para">    
<section class="paragraph">
    <p> "text" </p>  
</section>
</div> 

Answer 1

因为您希望图像的大小在段落的长度上具有动态性，所以我将使用2列flex> flex布局，第二个div包含图像作为background-background-image 。这样做是响应的，因为image-div的高度会随着段落变得越来越大。

.wrapper {
  display: flex;
  width: 100%;
  flex: auto;
}

.paragraph {
  background-color: #3498db;
  color: white;
  font-style: italic;
  font-weight: bold;
  width: 50%;
}

.image-div {
  background-image: url('https://dummyimage.com/600x400/000/fff');
  background-position: center;
  background-size: cover;
  width: 50%;
}

<h6> smaller </h6>
<div class="wrapper">
  <div class="paragraph">
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged </p>
  </div>
  <div class="image-div">

  </div>
</div>


<h6> larger </h6>
<div class="wrapper">
  <div class="paragraph">
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
      ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum
      is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div class="image-div">

  </div>
</div>

Answer 2

尚不清楚您实际想要什么。使用Flex。

.paragraph {
  display: flex; 
  justify-content:space-between;
  background-color: #3498db;
  color: white;
  font-style: italic;
  font-weight: bold;
}

<section class="paragraph">
  <p> "text" </p>
  <img class="kid" src="https://via.placeholder.com/150">
</section>