在的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