动态网格 - 显示内联块答案

【问题标题】：dynamic grid - to display inline block动态网格 - 显示内联块
【发布时间】：2017-02-07 15:28:08
【问题描述】：

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

我有两个问题： 1）我如何显示这些方块，以便它穿过页面 10x10 (inline-block) 尝试将显示内联块放在面板上但没有工作

拥有这样的东西：

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

任何帮助/建议将不胜感激

【问题讨论】：

您需要添加您的 CSS。也可以看到像 jsfiddle 这样的示例
@Andrew 添加了 jsfiddle。错过了 - jsfiddle.net/5evbmo5y

标签： javascript jquery html css

【解决方案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。

【讨论】：

【解决方案2】：

你可以添加'display: flex;' .square-container 的属性。

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

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

【讨论】：