Question

说我有一个空白页面和一个按钮（位于右上角的某个地方）。当我点击该按钮时，我希望能够在页面上创建一个正方形（一张联系人卡片）。当我再次点击它时，我希望能够在其旁边创建另一张具有相同尺寸的卡片等等（即每次点击都会添加一张卡片，直到卷筒中的4张然后从卡片的底部开始，直到整页都是填充）。

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

提前致谢，

Answer 1

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

我需要使用SELECT CONCAT(First_Field,'=>',Second_Field) FROM `cms_module_listit2ressources_item` AS item LEFT JOIN `cms_module_listit2ressources_item_categories` AS item_cat ON item.item_id = item_cat.item_id LEFT JOIN `cms_module_listit2ressources_category` AS category ON item_cat.category_id = category.category_id LEFT JOIN `cms_module_listit2ressources_fieldval` AS fieldval ON item.item_id = fieldval.item_id LEFT JOIN `cms_module_listit2ressources_fielddef` AS fielddef ON fieldval.fielddef_id = fielddef.fielddef_id AND (fielddef.fielddef_id,fieldval.value) IN(('4','Documents tÃ©lÃ©chargeables), ('5','Anglais')) WHERE item.active=1吗？

2016年，flex将是创建水平行的最佳方式，每个水平行包含4个等宽元素，是的。

但是如果你想要一个传统的浏览器解决方案，你也可以使用

flex
display: inline-block;
float: left;

以及具有明确指定宽度的容器，这意味着每个width --px;元素将从新行开始。

例如：

:nth-of-type(4n+1)

表示每张卡片需要.card { display: inline-block; float: left; width: 100px; margin: 12px; }个空格（124px + 12px + 100px）。

因此，如果您给12px明确宽度为4 x 124：

.card-container

然后在每4张牌之后，下一张牌将开始新的一行。

Answer 2

这是使用jQuery和Twitter Bootstrap的快速原型。

按下按钮时，会显示第一张包含card-hidden课程的卡片，并删除了card-hidden课程。按下一个按钮将显示下一张卡，直到没有卡片为止。

<强> 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>

<强> CSS

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

<强> JS

$("#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和JavaScript单击按钮以创建卡元素

2 个答案: