背景颜色不能正确显示文本和图像

Question

在https://www.artisanbelle.com上，我有推荐信，旁边有照片和文字(中间向下滚动)。我希望灰色的背景只在文本上。我试着这样做，将它添加到文本div中，但不起作用。所以我把它添加到包含图片的容器div中，但是现在它显示在图片周围，我根本不想让它在图片之外。我不确定如何解决这个问题。

​

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

​

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

Answer 1

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

添加下面的CSS：

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

在.testimonial-texta中缺少width属性之后的;。我已经改正了

Answer 2

首先，你去掉了“.pic-testimonial”类中的背景色，然后在“.test-text p”类中添加了背景色，你就得到了答案。