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>

如何在桌面上的一行上并排显示图像，但在移动设备上响应并居中对方？

1 个答案: