0

小提琴

我有一个以基础为中心的 div。在那个 div 里面，我有 215 x 215 的 div，里面有我所做工作的背景图片。

我已经让packery工作得很好。我的问题是我想将这些 div 放在它们的容器中。但我永远不知道一行会有多少个 div，所以我不能只给它们填充，因为如果我给填充的图像进入新行，它会搞砸。

我怎样才能解决这个问题？

谢谢！

这是我的 HTML

<div id="myWork" class="row">
    <div id="container" class="js-packery large-11 large-centered columns" data-packery-options='{ "itemSelector": ".item", "gutter": 20 }'>
        <div class="item" id="abgCapital">

        </div>
        <div class="item" id="voipInnovations">

        </div>
        <div class="item" id="payday">

        </div>
        <div class="item" id="inspira">

        </div>
    </div>
</div>

CSS

#myWork {
  margin-top: 30px;
  display: block;
  background-color: orange; }

#container {
  background-color: green; }

.item {
  width: 215px; }

#abgCapital {
  height: 215px;
  width: 215px;
  background-image: url(../img/abg_square_icon.png);
  background-size: cover;
  margin-left: auto;
  margin-right: auto; }

#voipInnovations {
  height: 215px;
  width: 215px;
  background-image: url(../img/vi_square_icon.png);
  background-size: cover; }

#payday {
  height: 215px;
  width: 215px;
  background-image: url(../img/pday_icon_square.png);
  background-size: cover; }

#inspira {
  height: 215px;
  width: 215px;
  background-image: url(../img/insp_square_icon.png);
  background-size: cover; }
4

1 回答 1

0

听起来您希望 div 像居中对齐的文本一样流动。我更新了你的样式来做到这一点：

#container {
  background-color: green;
  text-align: center;
  height: auto !important;
  padding-top: 5px; }

.item {
  width: 215px; 
  position: static !important; 
  display: inline-block; 
  margin-bottom: 5px; }

它似乎在这个小提琴中工作：http: //jsfiddle.net/fiddlerjason/58Qm3/

于 2014-08-05T20:24:23.077 回答