移動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

回答

相關問題