移动divs问题

我正在一个Wordpress页面上工作，我有这个页面，我需要15个图片与他们下面的文本在5行三。我已经做到了，但现在我需要他们在调整大小时将其移动到另一个之下。它工作得很好，直到我将图片&的div设置为30％宽。移动divs问题

这里是我的代码

<div class="wrapper-ostale-storitve"> 
<div class="item-ostale-storitve"> 
<div><a href="#"><img width="300" height="207" /></a></div> 
<div><a style="color: #000;" href="#">Picture A</a></div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>PIcture B</div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>Picture C</div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>Picture D</div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>Picture E</div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>Picture F</div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>Picture G</div> 
</div> 
<div class="item-ostale-storitve"> 
<div><img width="300" height="207" /></div> 
<div>Picture H</div> 
</div> 
<div class="item-ostale-storitve"> 
</div>

这里是我的编码的的jsfiddle。

https://jsfiddle.net/nzdoLzkw/

我还要补充一点，我直接在WordPress新的一页写这样的代码，我不会创建一个新的模板。因此，页面所有者稍后可以更容易地更改文字&。感谢您的任何建议。

来源

2017-05-10 stillan00b

难道他们必须在特定的顺序，当屏幕尺寸更小？ –

我认为最简单的解决方案是针对不同的屏幕尺寸使用@media规则。这里是例子https://jsfiddle.net/barbocc/nzdoLzkw/1

.wrapper-ostale-storitve { 
    overflow: hidden; 
    /*make sure the wrapper has no dimension*/ 
    margin-bottom: 10px; 
} 

.item-ostale-storitve { 
    width: 30%; 
    height: 295px; 
    float: left; 
    margin: 10px; 
    text-align: center; 
    font-family: 'Dancing Script', cursive; 
    font-size: 25px; 
} 

@media (max-width: 955px) { 
    .item-ostale-storitve { 
    width: 100%; 
    height: auto; 
    float: none; 
    } 
}

来源

2017-05-11 00:03:32 barbocc

很好，谢谢！出于某种原因，我认为使用@media会更有效。可能不会。再次感谢！ – stillan00b

我认为你的问题可以通过引导网格系统解决。您可以根据屏幕大小设计多个网格列。在这种情况下，你需要你的图片在你的div和div里有class img-responsive，并且有一个类col-xs-12 col-sm-6 col-md-4等。如果你不能使用bootstrap，那么你可以为不同的屏幕尺寸创建您自己的@media规则

来源

2017-05-10 23:45:50

回答

相关问题