Question

图片不适合放在同一行。如果图片相同，则将全部适合。我尝试减小图片的宽度，但是似乎不起作用。我必须缩小图片吗？

问题图片-https://i.stack.imgur.com/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 属性被隐式设置为行。

Answer 2

您的布局是一个经典的网格，有大量的库可以帮助您解决这些问题！

考虑使用Bootstrap-https://getbootstrap.com/docs/4.0/layout/grid/

如果您仍然想使用纯CSS，我建议您使用flexbox-https://internetingishard.com/html-and-css/flexbox/

祝你好运！

Answer 3

这是一个经典的网格系统，最好使用Bootstrap以获得完美的网格。使用boostrap

<div class="row">
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
</div>

Answer 4

请检查这部分代码

    <div class="column-12">
      <img src="img/upm.jpg" class="upm" alt="upm" style="width:20%">
      <h4>In partnership with  Upm</h4>
    </div>

'column-12'占据了行中的所有空间。以上是所有图片的“ column-4”。要么使用Bootstrap

图片不适合该行

4 个答案: