html - 背景颜色无法正确显示文本和图像

Question

在 https://www.artisanbelle.com我的推荐书旁边显示有照片和文字(中途向下滚动)。我希望灰色背景只出现在文字上。我尝试这样做，将它添加到文本 div，但它没有用。所以我将它添加到也包含图像的容器 div (pic-testimonial) 中，但现在它出现在图像周围，我根本不希望它出现在图像之外。我不确定如何解决这个问题。

.testimonial-container {
  width: 80%;
  border: none;
  margin: auto;
}


/* For mobile */

.testimonial-imga,
.testimonial-imgb,
.testimonial-texta,
.testimonial-textb {
  width: 100%;
}

.testimonial-imga,
.testimonial-imgb {
  float: left;
}

.testimonial-texta,
.testimonial-textb {
  float: left;
  padding: 15px;
  width: 100%;
  text-align: center;
  font-size: 1.3em;
}

.pic-testimonial::after {
  content: "";
  clear: both;
  display: table;
}

.testimonial-photo {
  max-width: 100%;
  height: 451px;
}

@media only screen and (min-width: 768px) {
  /* for desktop */
  .pic-testimonial {
    background-color: #DFE3E6;
    overflow: auto;
    margin-bottom: 30px;
  }
  .testimonial-imga,
  .testimonial-texta,
  .testimonial-imgb,
  .testimonial-textb {
    width: 50%;
  }
  .testimonial-imga {
    float: left;
  }
  .testimonial-imgb {
    float: right;
  }
  .testimonial-texta {
    float: right;
    padding: 15px;
    width: 50% background-color: #DFE3E6;
  }
  .testimonial-textb {
    float: left;
    padding: 15px;
    width: 50%
  }
  .photo1 {
    display: block;
    height: 451px;
    overflow: hidden;
    position: relative;
  }
  .testimonial-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .test-text,
  .test-text2 {
    position: relative;
  }
  .test-text p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-16%, 80%);
    text-align: center;
  }
  .test-text2 p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-16%, 15%);
    text-align: center;
  }
}

.testimonial-texta p {
  color: #235A4A;
}

.testimonial-textb p {
  color: #235A4A;
}

<div class="testimonial-container">

  <div class="pic-testimonial">
    <div class="testimonial-imga">
      <figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure>
    </div>
    <div class="testimonial-texta">
      <div class="test-text">
        <p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p>
      </div>
    </div>
  </div>

  // more pic-testimonial blocks

</div>

我希望灰色背景只围绕图片旁边的整个文本 block ，而不是图像周围。我希望它从图像的右侧一直延伸到整个文本 block 。

Answer 1

从 .pic-testimonial 类中删除 background-color。和

添加下面的 CSS:

.pic-testimonial {
  display: flex;
  flex-wrap: wrap;
}
.testimonial-texta {
    width: 50%;
    background-color: #DFE3E6;
}

您在 .testimonial-texta 中的 width 属性之后错过了 ;。我已经更正了