如何使这一行图像在CSS中具有响应性？

Question

在该网站的底部，我有一排徽标。 只要您不调整浏览器窗口的大小，它在桌面浏览器上看起来就很好。 在移动设备上查看时根本没有响应。

这是徽标行的HTML代码：

<!-- 1st row of logos -->
        <div id="clientlogosrow">
        <img src="images/logo-answerables.png" class="imagessmaller" /></a>
        <img src="images/logo-mfs.png" class="images" /></a>
        <img src="images/logo-wolf.png" class="images" />
        <img src="images/logo-JA.png" class="imagessmallerv2" />
        <img src="images/logo-JOC.png" class="imagessmallerv2" />
    </div>

<!-- 2nd row of logos -->
        <div id="clientlogosrow">
        <img src="images/logo-icl.png" class="imagessmaller" />
        <img src="images/logo-pm.png" class="imagessmaller" />
        <img src="images/logo-TD.png" class="imagessmaller" />
        <img src="images/logo-kl.png" class="imagessmaller" />
        <img src="images/logo-mmt.png" class="imagessmaller" /> 
        </div>

这是CSS ：

/* Client Logos */
.images {
display: inline;
margin: 5px;
padding: 0px;
vertical-align:middle;
height:85px;
}

.imagessmaller {
display: inline;
margin: 10px;
padding: 0px;
vertical-align:middle;
height:55px;
}

.imagessmallerv2 {
display: inline;
margin: 10px;
padding: 0px;
vertical-align:middle;
height:35px;
}

#clientlogosrow {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 7px;
height: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
}

您会注意到，某些类别的图像（“ images”，“ imagesmsallerv2”）之所以如此，是因为我在CSS中自动调整大小的尝试导致徽标尺寸确实过大。 我猜这不是错误的方法，所以请告诉我是否有一种更简单的方法来布置响应式徽标行！

Answer 1

尝试删除white-space: nowrap; 来自#clientlogosrow规则，因此您允许它使用中断。

nowrap空格序列将折叠为单个空格。 文本永远不会换行到下一行。 文本继续在同一行上，直到出现
遇到标签

https://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 2

通过使用flexbox布局，可以更轻松地实现目标。 看一下这个例子，我已经将您的徽标进行了热链接。 以原尺寸打开，然后尝试调整浏览器视图的大小。 希望这就是你想要的。 徽标大小也可以针对较小的屏幕进行调整，目前，我保留了您网站上的所有大小。

 body { background-color: darkgrey; /* Just to be able to see white logotypes */ } .logotypes { max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .logotypes img { margin-right: 10px; margin-bottom: 10px; width: auto; max-width: 230px; max-height: 85px; } 

 <div id="clientlogosrow" class="logotypes"> <img src="https://twotailsmedia.com/images/logo-answerables.png" class="imagessmaller"> <img src="https://twotailsmedia.com/images/logo-mfs.png" class="images"> <img src="https://twotailsmedia.com/images/logo-wolf.png" class="images"> <img src="https://twotailsmedia.com/images/logo-JA.png" class="imagessmallerv2"> <img src="https://twotailsmedia.com/images/logo-JOC.png" class="imagessmallerv2"> <img src="https://twotailsmedia.com/images/logo-icl.png" class="imagessmaller"> <img src="https://twotailsmedia.com/images/logo-pm.png" class="imagessmaller"> <img src="https://twotailsmedia.com/images/logo-TD.png" class="imagessmaller"> <img src="https://twotailsmedia.com/images/logo-kl.png" class="imagessmaller"> <img src="https://twotailsmedia.com/images/logo-mmt.png" class="imagessmaller"> </div>