如何为图像中看到的三个 flexboxes 和名称、公司徽标和公司名称分别创建边框？

Question

在 WordPress 页面中，我试图显示静态内容列，如下图所示。尝试使用 flex 结构，但还不能正确使用它。请提出可能的方法。我知道我比几天前发布这个问题时更接近解决方案。在这些推荐书周围添加边框并对齐图标、名称和公司徽标是此任务的最后一部分。

我只能按照下图所示的 HTML 和后面的 CSS 进行操作。我还需要确保此部分适合移动设备。

.testimonial-outer-box {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  align-content: normal;
}

.testimonial-heading {
  font-family: 'Playfair Display';
  font-weight: bold;
  font-style: italic;
  color: #cea67e;
  text-align: center;
  font-size: 40px;
}

.testimonial-subheading {
  font-family: Roboto;
  text-align: centered;
  color: #ffffff;
}

.testimonial-block {
  background-color: #67213f;
  margin-bottom: 1.6rem;
}

.testimonial-container {
  border: solid 1px;
  border-color: #cea67e;
  background-color: white;
  padding: 10px;
}

<div class="testimonial-block">
  <div class="wrap-x">
    <div class="inside">
      <div class="col col-xs-12 center-xs">
        <div class="testimonial-heading">TESTIMONIALS</div>
      </div>
      <div class="col col-xs-12 center-xs">
        <div class="testimonial-subheading">Hear from our Delighted Clients</div>
      </div>
      <div class="row">
        <div class="col col-xs-12 col-md-4 testimonial-outer-box">
          <div class="testimonial-box">
            <div class="testimonial-container">
              <div class="testimonial-title">THANK YOU! The PwP gifts we recently sent out have been a huge hit with our clients and internal team.</div>
              <div class="testimonial-picture">
                <picture>
                  <source media="(max-width: 360px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Bailiwick.png">
                  <source media="(max-width: 668px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Bailiwick.png">
                  <source media="(max-width: 1024px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Bailiwick.png">
                  <source srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Bailiwick.png">
                  <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Bailiwick.png" alt="">
                </picture>
              </div>
              <div class="testimonial-author">-Amanda K.</div>
              <div class="testimonial-job">Bailiwick</div>
            </div>
          </div>
        </div>
        <div class="col col-xs-12 col-md-4 testimonial-outer-box">
          <div class="testimonial-box">
            <div class="testimonial-container">
              <div class="testimonial-title">I love the package options, but most importantly I love the amazing purpose behind each box. Such a great meaning and inspiration. Whether I need a gift for a friend, family member, or a business partner, you all have a package to meet all their needs.</div>
              <div class="testimonial-picture">
                <picture>
                  <source media="(max-width: 360px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Veracity.png">
                  <source media="(max-width: 668px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Veracity.png">
                  <source media="(max-width: 1024px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Veracity.png">
                  <source srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Veracity.png">
                  <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/Veracity.png" alt="">
                </picture>
              </div>
              <div class="testimonial-author">-Sarah C.,</div>
              <div class="testimonial-job">Veracity Networks</div>
            </div>
          </div>
        </div>
        <div class="col col-xs-12 col-md-4 testimonial-outer-box">
          <div class="testimonial-box">
            <div class="testimonial-container">
              <div class="testimonial-title">Our employees have been singing your praises and sharing on their LinkedIn feeds not only your amazing products but your professionalism and outstanding customer support.</div>
              <div class="testimonial-picture">
                <picture>
                  <source media="(max-width: 360px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/LearnOnDemand.png">
                  <source media="(max-width: 668px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/LearnOnDemand.png">
                  <source media="(max-width: 1024px)" srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/LearnOnDemand.png">
                  <source srcset="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/LearnOnDemand.png">
                  <img src="https://dev-packed-with-purpose.pantheonsite.io/wp-content/uploads/2021/11/LearnOnDemand.png" alt="">
                </picture>
              </div>
              <div class="testimonial-author">-Melanie H., </div>
              <div class="testimonial-job">Learn on Demand Systems</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是我在与您的网站类似的代码中使用的代码

row is the container where you should put your pictures and apply this code in css. kindly change it to appropriate class

.row{
    display:flex;
    flex-dirction:row;
    justify-content:space-evenly;
    wrap:flex-wrap;
    }

如何为图像中看到的三个 flexboxes 和名称、公司徽标和公司名称分别创建边框？

How to create a border each of three flexboxes and Name, company logo and the company name as seen in the image?

html

css

xhtml

frontend