Question

在this website的底部，我有一排徽标。它在桌面浏览器上看起来非常好......只要你不调整浏览器窗口的大小。并且在移动设备上观看时根本没有响应。

以下是徽标行的 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>

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

2 个答案: