html - 如何在孔宽上连续对齐 3 个图像( Logo )并使它们在较小的显示器上保持这种对齐方式

Question

我将尝试将 3 个高度相同但宽度不同的 Logo 对齐到孔屏幕宽度的一行上:第一个图像应在屏幕的左端对齐，第三个应在屏幕的左端对齐屏幕的右端和第二个应该 float 在其他两个图像之间，并且它们之间的间距相同。当显示变小时，空间应该变小，直到达到定义的最小空间。从那里开始，如果显示器变得更小，则孔行应该按比例缩小。我希望这张图片有助于澄清我的想法。

how it should look like

它用于 MailChimp 时事通讯。

这就是我得到的结果:

.my-logo-container{
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.my-logos{
flex: 1;
border: 1px solid red;
height: auto;
max-height: 100px;
}

<div class="my-logo-container">
  <div class="my-logos">
    <a href="https://via.placeholder.com/100x80.png">
      <img src="https://via.placeholder.com/100x80.png">
    </a>
  </div>
   <div class="my-logos">
    <a href="https://via.placeholder.com/195x80.png">
      <img src="https://via.placeholder.com/195x80.png">
    </a>
  </div>
   <div class="my-logos">
    <a href="https://via.placeholder.com/175x80.png">
      <img src="https://via.placeholder.com/175x80.png">
    </a>
  </div>
</div>

非常感谢任何帮助。

Answer 1

我有一个替代品给你。你是这个意思吗？

.my-logo-container{
  width: 100%;
  margin:0;
}

ul.my-logos{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.my-logos li{
    width: 32.33333%;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin:0;
    float: left;
    text-align: center;
    border:1px solid red;
}
ul.my-logos li a img{
    max-width: 130px;
    height:80px;
}

<div class="my-logo-container">
  <ul class="my-logos">
    <li>
      <a href="https://via.placeholder.com/100x80.png">
      <img src="https://via.placeholder.com/100x80.png">
      </a>
    </li>
    <li>
      <a href="https://via.placeholder.com/195x80.png">
      <img src="https://via.placeholder.com/195x80.png">
      </a>
    </li>
    <li>
      <a href="https://via.placeholder.com/175x80.png">
      <img src="https://via.placeholder.com/175x80.png">
      </a>
    </li>
  </ul>
</div>