如何在孔宽度上连续对齐3张图像（徽标），并在较小的显示器上以这种方式对齐

2024-04-30 • 问答

我将尝试在孔屏幕宽度上连续对齐3个具有相同高度但宽度不同的徽标：第一个图像应在屏幕的左端对齐，第三个图像应在屏幕的左端对齐屏幕的右端和第二个应漂浮在其他两张图像之间，且两张图像之间应有相同的间距。当显示器变小时，该空间应变小，直到达到定义的最小空间。从那里开始，如果显示变得更小，则应按比例缩小孔行。我希望图像有助于阐明我的想法。

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>

我们非常感谢您的帮助。

我有另一种选择。你是这个意思吗？

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

我想出了这个解决方案：我没有在CSS中定义最小空间，而是在图像本身中添加了更多空间。现在他们可以互相触摸，看起来仍然不错。带显示屏：flex;和证明内容：之间的空间；我把它们排成一排。最大宽度：100％；和高度：自动；图像会在较小的屏幕上自动调整大小。现在对我有用。

.logo-container {
  display: flex;
  justify-content: space-between;
}
.logo {
  max-width: 100%;
  height: auto;
}

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

如何在孔宽度上连续对齐3张图像（徽标），并在较小的显示器上以这种方式对齐

siqi111 回答：如何在孔宽度上连续对齐3张图像（徽标），并在较小的显示器上以这种方式对齐

大家都在问