空白のページとボタンがあります（右上のどこかに）。そのボタンをクリックすると、ページ（Aコンタクトカード）に正方形を作成できます。それをもう一度クリックすると、同じ大きさのカードの横に別のカードを作成できるようになります（つまり、クリックするたびにカードが追加され、ロールの中にカードが追加されます塗りつぶし）。CSSとJavaScriptボタンをクリックしてカード要素を作成します
私はこれをどのように達成できるかについては確信していません。私はどのようにボタンやクリックイベントを挿入する方法を知っているだけで私はこれを構造化することができません。フレックスを使用する必要がありますか？事前に
おかげで、
私は、この問題に取り組むことができますどのように視覚化しようとしています。
flexを使用する必要がありますか？ 2016年に
、flexはい、それぞれが4つの等しい幅の要素を含む、水平方向の行を作成接近するための最良の方法であろう。
しかし、あなたがレガシーブラウザソリューションをしたい場合、あなたはまた、
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枚のカードの後に、次のカードは、新しい行を開始します
.card-container {
width: 496px;
}
：
は、もしそうなら、あなたは4×124の.card-container明示的な幅を与えます。
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.");
}
});
あなたは、これまで私たちは/あなたが助けを参照するための任意のコードを書かれています。.. ？ – Stuart
隠された要素を持つことができます。デフォルトでは、ページ上のCSSの設定が望ましい場合があります。ボタンをクリックすると、 'code'.clone'code'メソッドを使用して、存在するdivを複製し、その表示をブロックに設定できます。この方法で、UI上にn個のボックスを生成することができます。 –
こんにちはスチュアート、私はまだコードを書いていません。私はこの問題にどのように取り組むことができるかを視覚化しようとしています。 –