CSS和JavaScript单击按钮创建卡片元素_Javascript_Html_Css

CSS和JavaScript单击按钮创建卡片元素

javascript html css

CSS和JavaScript单击按钮创建卡片元素,javascript,html,css,Javascript,Html,Css,假设我有一个空白页和一个按钮（在右上角的某个地方）。当我点击该按钮时，我希望能够在页面上创建一个正方形（联系人卡）。当我再次单击它时，我希望能够在它旁边创建另一张具有相同尺寸的卡，以此类推（即每次单击都会添加一张卡，直到一卷中有4张卡，然后从卡的底部开始，直到整个页面填满为止）我不确定如何才能做到这一点。我知道如何插入一个按钮和一个点击事件，只是不知道如何构造它。我需要使用flex吗提前感谢, 我试图想象我如何解决这个问题我需要使用flex吗 2016年，flex将是创建水平行的最佳方法，

假设我有一个空白页和一个按钮（在右上角的某个地方）。当我点击该按钮时，我希望能够在页面上创建一个正方形（联系人卡）。当我再次单击它时，我希望能够在它旁边创建另一张具有相同尺寸的卡，以此类推（即每次单击都会添加一张卡，直到一卷中有4张卡，然后从卡的底部开始，直到整个页面填满为止）

我不确定如何才能做到这一点。我知道如何插入一个按钮和一个点击事件，只是不知道如何构造它。我需要使用flex吗

提前感谢,

我试图想象我如何解决这个问题

我需要使用flex吗

2016年，

flex

将是创建水平行的最佳方法，每个行包含4个等宽元素，是的

但如果您想要传统浏览器解决方案，也可以使用

```
显示：内联块
```


float：左

width--px


以及一个具有明确指定宽度的容器，这意味着类型（4n+1）元素的每一个：n将从新行开始
例如：
.card {
display: inline-block;
float: left;
width: 100px;
margin: 12px;
}

表示每张卡需要124px
的空间（12px
+100px
+12px
）
因此，如果您为.card容器
指定4 x 124的显式宽度：
.card-container {
width: 496px;
}

然后在每4张卡之后，下一张卡将在新的一行开始。
这里有一个使用and的快速原型
按下按钮时，显示第一张隐藏类别为卡的卡，并将其卡隐藏类别移除。按下“下一步”按钮将显示下一张卡，直到没有剩余的卡为止
HTML
<html>
<body>
  <button id="button">Add</button>  
  <div class="container">
    <div class="row">
      <div class="card card-hidden col-xs-3">1</div>
      <div class="card card-hidden col-xs-3">2</div>
      <div class="card card-hidden col-xs-3">3</div>
      <div class="card card-hidden col-xs-3">4</div>
    </div>
  </div>
</body>
</html>

JS
.card {
  height: 200px;
}
.card-hidden {
  display: none;
}

$("#button").on("click", function(e) {
 if ($(".card-hidden").length > 0) {
    $(".card-hidden").first().slideToggle(function() {
      $(this).removeClass("card-hidden");
    });
 } else {
   console.log("No more cards to show.");
 }
});

到目前为止，您是否编写了代码供我们查看/帮助您……？您可以在页面上有一个隐藏元素，最好是带有所需CSS默认设置的div。单击按钮，您可以使用“code”。克隆“code”方法克隆现有的div并将其显示设置为block。这样你就可以在UI上生成n个框了。嗨，斯图尔特，我还没有写任何代码。我试图想象我如何解决这个问题。