divsの移動の問題

Question

私はWordpressのページに取り組んでいます。私は5つの行に3つずつテキストがある15枚の写真を取得する必要があるこのページを持っています。私はそれをしましたが、今はサイズを変更するときに別のものの下に移動する必要があります。画像&のテキストを30％の幅に設定するまで、それは十分にうまくいった。ここで

は私のコードは

だ

<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/

また、私はワードプレスで新しいページに直接コードを書くことを、私は新しいテンプレートを作成していないよ追加される場合があります。したがって、ページの所有者がテキスト&の写真を後で変更する方が簡単になります。 アドバイスありがとうございます。

Answer 1

私は最も簡単な解決策は、異なる画面サイズのための@メディアルールを使用していると思います。ここ は、画面サイズが小さい場合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; 
    } 
} 

Answer 2

あなたの問題は、ブートストラップグリッドシステムで解決できると思います。画面サイズに応じて複数のグリッド列を設計できます。その場合、div内にclass img-responsiveを持つために画像が必要です。divにはcol-xs-12 col-sm-6 col-md-4などがあります。 ブートストラップを使用できない場合は、さまざまな画面サイズのための独自の@メディアルールを作成することができます