動態網格-顯示嵌入式塊

Question

到目前為止，我已經設法編碼了幾個正方形，並且當我將鼠標懸停在每個正方形上時，每個正方形都有翻轉動畫，當單擊它時，將有一個彈出模式窗口。

我有2個問題：1）我如何顯示這些正方形，以便它能跨頁面10x10（內嵌塊）嘗試將內嵌塊顯示在面板上但沒有起作用

擁有這樣的東西：

2）將來，網格數量將增加到30x10。 有沒有一種方法可以動態繪制這些正方形，JS函數？

任何幫助/建議將不勝感激

Answer 1

1）將inline-block添加到.trigger類應具有您想要的效果，例如：

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

JS小提琴

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類的對象.square-container 。 我實際上建議給該容器一個ID來引用它。

JS小提琴

請注意，在設置觸發器動畫動作之前，我已經動態添加了盒子，以便動畫可以在動態添加的盒子上工作。 如果您希望在頁面加載后的一段時間內動態添加框，請參見https://stackoverflow.com/a/21239248/4799121 。

Answer 2

您可以添加“ display：flex;” 屬性添加到您的.square-container。

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

然后將padding-left添加到.panel。