動態網格 - 要顯示內嵌塊

到目前爲止，我設法編寫了幾個方塊，每個方塊都有翻動畫，當我懸停時，當它被點擊時，它將會有一個彈出窗口。動態網格 - 要顯示內嵌塊

我有2個問題： 1）如何顯示這些正方形所以它會在頁面上10×10 （inline-block的）嘗試去把顯示器內嵌塊面板，但沒有工作的

爲了有東西像這樣：

2）在未來網格的數量將增加至30×10說。有沒有一種方法可以動態地繪製這些方塊，JS函數？

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

來源

2017-02-07 rory-h

你需要在你的CSS中添加。也許很高興看到一個像jsfiddle – Andrew

@Andrew添加jsfiddle的例子。錯過了 - https://jsfiddle.net/5evbmo5y/ –

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。

來源

2017-02-07 15:43:09 enigma

您可以添加'display：flex'屬性到您的.square容器。

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

然後添加填充左邊的.panel。

來源

2017-02-07 15:43:51 lorenag83

動態網格 - 要顯示內嵌塊

回答

相關問題