Question

我正在使用Wordpress页面，我有这个页面，我需要在其中获得15张带有文本的图片，每行5行3行。我已经这样做了，但是现在我需要他们在调整大小时移动一个。它工作得很好，直到我设置图片的div和＆amp;文字宽度为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/

我可能还会补充一点，我直接在wordpress的新页面中编写此代码，我不是在创建新模板。因此，页面所有者更容易更改文本和图片以后。谢谢你的任何建议。

Answer 1

我认为最简单的解决方案是将@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;
  }
}

移动divs问题

1 个答案: