如何在孔宽度上一路领先对齐3个图像(徽标)，并在较小的显示器上保持它们的对齐方式

Question

我将尝试在孔屏幕宽度上的一路领先上对齐3个高度相同但宽度不同的徽标：第一个图像应在屏幕的左端对齐，第三个图像应位于屏幕的右端对齐，第二个图像应漂浮在其他两个图像之间，图像之间的空间相同。当显示器变小时，空间应该变小，直到达到定义的最小空间。从那时起，如果显示变得更小，孔行应该缩小。我希望这张照片有助于澄清我的想法。

它应该看起来像

这是一份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>

Answer 2

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

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