html - 响应式设计图像和文本问题

Question

我正在尝试构建一个响应式网页，一旦用户将 View 从桌面切换到移动设备，以便能够看到移动版本，其中类别将一个放在一边而不是 6 个放在一行。它可以达到某些像素并且可以在横向模式下工作，但在纵向模式下似乎一切都在叠加。这是我的代码:

    <code>
<style type="text/css">.catalogue{padding:0; margin:0; box-sizing:border-box; width:100%;}
@media all and(min-device-width: 769px)and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)  {

}
.catalogueItems{display:inline-block;width:16%;}
.catalogueItemsText{width: 175px; text-align: center; background-color: rgb(229, 19, 39);}

}


@media all and(max-width: 480px)  {
.catalogueItems {  width:51%;}
.catalogueItemsText { width:51%;}}

@media all and (min-width: 481px)and (max-width: 768px){.catalogueItems { display:inline-block; width:60%;}
}


</style>
</code>
<div class="catalogue">
<div class="catalogueItems"><code><code><a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a></code> </code>
<div class="catalogueItemsText"><code><span style="font-size:16px;"><code><font color="#ffffff"><span style="line-height: 22.3999996185303px;">Bed Frames</span></font></code></span> </code></div>
<code> </code></div>

<div class="catalogueItems"><code><code><a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a></code> </code>

<div class="catalogueItemsText"><code><span style="font-size:16px;"><code><font color="#ffffff"><span style="line-height: 22.3999996185303px;">Bed Frames</span></font></code></span> </code></div>
<code> </code></div>

<div class="catalogueItems"><code><code><a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a></code> </code>

<div class="catalogueItemsText"><code><span style="font-size:16px;"><code><font color="#ffffff"><span style="line-height: 22.3999996185303px;">Bed Frames</span></font></code></span> </code></div>
<code> </code></div>

<div class="catalogueItems"><code><code><a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a></code> </code>

<div class="catalogueItemsText"><code><span style="font-size:16px;"><code><font color="#ffffff"><span style="line-height: 22.3999996185303px;">Bed Frames</span></font></code></span> </code></div>
<code> </code></div>

<div class="catalogueItems"><code><code><a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a></code> </code>

<div class="catalogueItemsText"><code><span style="font-size:16px;"><code><font color="#ffffff"><span style="line-height: 22.3999996185303px;">Bed Frames</span></font></code></span> </code></div>
<code> </code></div>

<div class="catalogueItems"><code><code><a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a></code> </code>

<div class="catalogueItemsText"><code><span style="font-size:16px;"><code><font color="#ffffff"><span style="line-height: 22.3999996185303px;">Bed Frames</span></font></code></span> </code></div>
<code> </code></div>
</div>

Answer 1

您的代码有点复杂。我认为它可以简单得多。

这是一个例子，它并没有完全按照你想要的方式去做，但它可能是一个好的开始:

fiddle 来测试它: http://jsfiddle.net/y9eo177w/1/

HTML 部分:

<div class="catalogue">
    <div class="catalogueItems">
        <a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a> 
        <div class="catalogueItemsText">Bed Frames</div>
    </div>
    <div class="catalogueItems">
        <a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a> 
        <div class="catalogueItemsText">Bed Frames</div>
    </div>
    <div class="catalogueItems">
        <a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a> 
        <div class="catalogueItemsText">Bed Frames</div>
    </div>
    <div class="catalogueItems">
        <a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a> 
        <div class="catalogueItemsText">Bed Frames</div>
    </div>
    <div class="catalogueItems">
        <a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a> 
        <div class="catalogueItemsText">Bed Frames</div>
    </div>
    <div class="catalogueItems">
        <a href="http://www.dreams.co.uk/beds"><img class="img1" src="http://imageshack.com/a/img538/5008/q5uCoV.jpg" /> </a> 
        <div class="catalogueItemsText">Bed Frames</div>
    </div>
</div>

CSS 部分:

.catalogue{    padding:0; margin:0; box-sizing:border-box; width:100%;}
.catalogueItems{display:inline-block;width:16%;}
.catalogueItems a{display:block ;}
.catalogueItems img{width:100% ;}
.catalogueItemsText{width: auto; text-align: center; background-color: rgb(229, 19, 39);font-size:16px;    line-height: 22px;    color:#FFF ;}

@media (max-width:768px) {
    .catalogueItems{display:block;width:50%;}
}

希望对你有帮助