动态网格-显示嵌入式块

Question

So far I've managed to code a few squares and each square has flip animation when I hover and when it is being clicked it will have a popup modal window.

I have 2 questions: 1) How do I display these squares so it will go across the page 10x10 (inline-block) Tried putting display inline block on the panel but didnt work

To have something like this:

2) In the future the number of grids will increase to say 30x10. Is there a way I can draw these squares dynamically, JS function?

Any help/suggestions would be greatly appreciated

Answer 1

1) Adding the inline-block to the .trigger class should have the effect you desire, for instance:

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

JS fiddle

2) You can do this straightforwardly with JQuery. First you want a function to generate each box:

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>"
}

Then you need to call this for every box you wish to add:

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

JQuery creates a new element based on the strings returned by genSquare() , and appends the element to objects with the class .square-container . I'd actually recommend giving that container an ID to reference it by.

JS fiddle

Note that I've added the boxes dynamically before setting the trigger animation actions, so that the animations work on the dynamically added boxes. If you wish to add boxes dynamically some time after the page load, see https://stackoverflow.com/a/21239248/4799121 .

Answer 2

you can add 'display: flex;' property to your .square-container.

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

And then add padding-left to the .panel.