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

问题描述：

在的this website底部我有标识的一排。它在桌面浏览器上看起来非常好，只要您不调整浏览器窗口大小即可。而且在移动设备上查看时一点也不敏感。如何使这一行图片在CSS中响应？

下面是标识的行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中自动调整大小的尝试导致真正不成比例的标志大小。我猜这不是错误的做法，所以请让我知道是否有更简单的方式来布置响应式徽标行！

你怎么想你的广告图标的列表的行为在较小的屏幕？ – Flying

我希望他们能够保留自己的大小，但“重叠”的可视面积缩小或增大（我希望是有道理的） – AssaultCactus

请把我的回答如下 – Flying

答

你可以达到你的目的，通过使用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>

感谢您嘲笑这段代码！但是，响应式视图仍然不起作用。截图：https://imgur.com/a/Txoe9 的切断，图标不会重新排列/重新堆叠留在视图当观看空间的变化墙纸。 – AssaultCactus

我再次尝试了你的代码，现在它似乎在工作。我一定在第一次做错了事情。感谢您对此的帮助！ – AssaultCactus

答

尝试从#clientlogosrow规则删除white-space: nowrap;所以你允许它使用中断。

nowrap空格的序列将崩溃为单个空格。文本将永远不会换行到下一行。该文本在同一行上继续直到
标签遇到

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

试了一下看看例子。稍微改进，但在移动视图中仍然不太好：https：//imgur.com/a/DCctE。奇怪的是，Chrome在Chrome浏览器的响应式测试查看器中看起来很好，但在实际的Android设备上看起来不太好（使用Nexus 5x进行测试）。 – AssaultCactus

只是为了确保，你刷卡刷新了吗？因为它看起来仍然在使用nowrap值。也许它的缓存。 –

是的，我想也一样，并做了一个刷新。不幸的是，看起来还是一样。 – AssaultCactus

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

相关推荐