html - 图片排不下

Question

图片不适合放在同一行。 如果是同一张图片，它将完全适合。 我试过缩小图片的宽度，但似乎不起作用。 我必须把图片变小吗？

问题图片 - /image/3E9zo.png

HTML

 <section class="section-team" id="team">
    <div class="row">
       <h2>team members</h2>    
    </div>
  <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg"  class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
    <div class="column-12">
    <img src="img/upm.jpg" class="upm" alt="upm" style="width:20%">
    <h4>In partnership with  Upm</h4>
  </div>       
</section>

CSS

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.column-4 {
  float: left;
  box-sizing: border-box; 
  width: 33.3%; 
  display: inline-block;
  padding: 5px;
  padding-right: 30px;
}

.column-12 { 
  float: right; 
  box-sizing: border-box; 
  width: 100%; 
  display: inline-block;
  padding: 5px; 
  padding-right: 30px;
}

.section-team{
    text-align: center;
    clear:both;
}

.members{
    border-radius: 50%;
}

.upm {
  float: right ; 
  padding-top: 2px;

}

我希望有人能告诉我如何使图片合身

Answer 1

对于您的问题，使用 flex 可能是最好和最简单的解决方案。你可以通过声明来做到这一点:

display:flex;

在照片的容器中。在您当前的 HTML 中，它必须添加到 section 标记。 flex 将做的是“强制”每个元素都在同一行中。因为它隐含了 flex-direction 属性，设置为 row。