html - 如何使图像在桌面上并排显示在一行中，但在移动设备上响应迅速且彼此居中？

Question

我们有两个页面，我们试图让图片在台式机和平板电脑上并排显示在一行中，但在移动设备上会响应并居中显示。它在一页上工作，而不在另一页上工作——我假设是因为图像在它中断的页面上太宽了，但这让我认为整个代码都是错误的。尖端？有什么建议吗？

页面是--

http://www.vaporfresh.com/pages/retailers

http://www.vaporfresh.com/

CSS--

div.jumbo {
background-color: #fff;
width: 100%; 
margin: 6px auto; padding: 2px;
text-align: center;
}

.jumbo img {
padding: 8px;
display: inline;
}

@media (max-width: 768px) { 
.jumbo img {
    display: block;
    margin: 5px auto;
}
}

HTML--

<div class="jumbo">
<a href="http://www.amazon.com/gp/aag/main/ref=as_li_ss_tl?ie=UTF8&amp;asin=&amp;camp=1789&amp;creative=390957&amp;isAmazonFulfilled=1&amp;isCBA=&amp;linkCode=ur2&amp;marketplaceID=ATVPDKIKX0DER&amp;orderID=&amp;seller=A1ZSBT0HOD7TH4&amp;sshmPath=&amp;tag=rawathletics-20&amp;linkId=L74XRYUS7ROJTOXL" target="_blank" rel="nofollow"><img src="//cdn.shopify.com/s/files/1/0943/1886/files/rsz-amazon-logo.jpeg?11379810593739760604" /></a> 
<a href="http://www.soap.com/buy/Brand=Vapor+Fresh" target="_blank" rel="nofollow"><img src="//cdn.shopify.com/s/files/1/0943/1886/files/Soap_Logo_CMYK.jpg?14350831404106169407" /></a> 
<a href="http://www.vinemarket.com/buy/Brand=Vapor+Fresh" target="_blank" rel="nofollow"><img src="//cdn.shopify.com/s/files/1/0943/1886/files/VineMarket_Logo_CMYK.jpg?14350831404106169407" /></a> 
<a href="http://www.roguefitness.com/catalogsearch/result/?q=vapor+fresh" target="_blank" rel="nofollow"><img src="//cdn.shopify.com/s/files/1/0943/1886/files/roguefitness-vapor-fresh.jpg?14350831404106169407" /></a>
</div>

Answer 1

https://jsfiddle.net/juk6ynd4/

您的代码是正确的，它确实可以正常工作。但是查看您正在使用的网站

width: 100%;

但是图像位于网格中，因此您需要仔细查看并了解是什么限制了尺寸。例如你有这样的东西:

#div1 {
width: 50%;
}

#div2 {

width: 100%;
}

然后

<div id="div1">
    <div id="div2">
        This DIV will not get any bigger than 50% due to the scaling of div1!
    </div>
</div>