动态网格 - 显示内联块

Question

到目前为止，我已经设法编码了几个正方形，当我悬停时每个正方形都有翻转动画，当它被点击时，它将有一个弹出模式窗口。

我有两个问题： 1）如何显示这些方块，使其跨越页面10x10   （内联块）尝试将显示内联块放在面板上但没有工作

有这样的事情：

2）未来网格的数量将增加到30x10。有没有办法可以动态地绘制这些方块，JS函数？

非常感谢任何帮助/建议

Answer 1

1） 将inline-block添加到.trigger类应该具有您想要的效果，例如：

.trigger {
    display: inline-block;
    width: 60px;
}

JS fiddle

2）你可以用JQuery直接做到这一点。首先，您需要一个函数来生成每个框：

function genSquare(front, back) {
        return "<div class='trigger'>\
            <div class='hover panel'>\
          <div class='front'>\
            <div class='box1'>\
              <p>" + front + "</p>\
            </div>\
          </div>\
          <div class='back'>\
            <div class='box2'>\
              <p>"+back+"</p>\
            </div>\
          </div>\
        </div>\
  </div>"
}

然后你需要为你想要添加的每个盒子调用它：

$( document ).ready(function() {
    $(genSquare('hello', 'world')).appendTo( '.square-container' );
    ...
}

JQuery根据genSquare()返回的字符串创建一个新元素，并将该元素追加到具有类.square-container的对象。我实际上建议给该容器一个ID来引用它。

JS fiddle

请注意，我在设置触发器动画操作之前动态添加了框，以便动画可以在动态添加的框上运行。如果您希望在页面加载后的某个时间动态添加框，请参阅https://stackoverflow.com/a/21239248/4799121。

Answer 2

你可以添加＆＃39; display：flex;＆＃39;物业到.square-container。

.square-container {
   width: 60px;
   margin: 35px auto;
   display: flex;
   margin-left: 10px;
   padding-left: 10px;
}

然后在.panel上添加padding-left。