HTMLとCSSのアラインメント

Question

これは私が間違えた場合にstackoverflow so pardonを使用した初めてのことです。

ここでは、CSSコードスニペットを複製しようとしています：https://codepen.io/virgilpana/pen/RNYQwB。

これはうまく動作しますが、同じページに複数の製品カードを追加する方法がわかりません。 ＃product-card divを複製しようとしましたが、そのようにするとコードが機能しなくなります。ここに例があります：

<div id="make-3D-space"> 
    <div id="product-card"> 
     <div id="product-front"> 
      <div class="shadow"></div> 
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" /> 
      <div class="image_overlay"></div> 
      <div id="view_details">View details</div> 
      <div class="stats">   
       <div class="stats-container"> 
        <span class="product_price">$39</span> 
        <span class="product_name">Adidas Originals</span>  
        <p>Men's running shirt</p>            

        <div class="product-options"> 
        <strong>SIZES</strong> 
        <span>XS, S, M, L, XL, XXL</span> 
        <strong>COLORS</strong> 
        <div class="colors"> 
         <div class="c-blue"><span></span></div> 
         <div class="c-red"><span></span></div> 
         <div class="c-white"><span></span></div> 
         <div class="c-green"><span></span></div> 
        </div> 
       </div>      
       </div>       
      </div> 
     </div> 
     <div id="product-back"> 
      <div class="shadow"></div> 
      <div id="carousel"> 
       <ul> 
        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li> 
        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li> 
        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li> 
       </ul> 
       <div class="arrows-perspective"> 
        <div class="carouselPrev"> 
         <div class="y"></div> 
         <div class="x"></div> 
        </div> 
        <div class="carouselNext"> 
         <div class="y"></div> 
         <div class="x"></div> 
        </div> 
       </div> 
      </div> 
      <div id="flip-back"> 
       <div id="cy"></div> 
       <div id="cx"></div> 
      </div> 
     </div>  
    </div> 
    <div id="product-card"> 
     <div id="product-front"> 
      <div class="shadow"></div> 
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" /> 
      <div class="image_overlay"></div> 
      <div id="view_details">View details</div> 
      <div class="stats">   
       <div class="stats-container"> 
        <span class="product_price">$39</span> 
        <span class="product_name">Adidas Originals</span>  
        <p>Men's running shirt</p>            

        <div class="product-options"> 
        <strong>SIZES</strong> 
        <span>XS, S, M, L, XL, XXL</span> 
        <strong>COLORS</strong> 
        <div class="colors"> 
         <div class="c-blue"><span></span></div> 
         <div class="c-red"><span></span></div> 
         <div class="c-white"><span></span></div> 
         <div class="c-green"><span></span></div> 
        </div> 
       </div>      
       </div>       
      </div> 
     </div> 
     <div id="product-back"> 
      <div class="shadow"></div> 
      <div id="carousel"> 
       <ul> 
        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li> 
        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li> 
        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li> 
       </ul> 
       <div class="arrows-perspective"> 
        <div class="carouselPrev"> 
         <div class="y"></div> 
         <div class="x"></div> 
        </div> 
        <div class="carouselNext"> 
         <div class="y"></div> 
         <div class="x"></div> 
        </div> 
       </div> 
      </div> 
      <div id="flip-back"> 
       <div id="cy"></div> 
       <div id="cx"></div> 
      </div> 
     </div>  
    </div> 
</div> 

cssとjsは上記のペンにあります。

私は画像を別のものに置き換えることができるように、より多くのグリッドを作成するためにdivをコピーして貼り付けてもらえませんか？

ありがとうございます。

Answer 1

ようこそ！これは最初の大きな質問でした。

@Tyrと@vysncがコメントに示唆しているように、product-cardコードブロックのコピー/貼り付けの最大の問題は、デモではクラスではなくIDを使用することです。 The W3C states：

id属性は、要素の一意の識別子（ID）を指定します。この値は、要素のホームサブツリー内のすべてのIDの中で一意でなければならず、少なくとも1つの文字を含んでいなければなりません。

したがって、そのコードブロック内のすべてのIDを複製すると、ベストプラクティスに反します。あなたのjQueryも混乱しています。その多くは、#product-cardと#view-detailsのような個々のIDにスコープされています。各ページにはこれらの要素のうちの1つしか存在しないと判断した場合は、それを処理する方法が不明確です。

はCodepenコードは、最も効率的に書かれていませんが、私はこれをデバッグするには、以下の手順を取る：

1. はあなただけで#product-cardコードブロックの実行中のインスタンスを持っていることを確認してください。そのコードブロック内で、すべてのIDをクラスに変更します。つまり、<div id="product-card">は<div class="product-card">になります。明らかに、これはあなたのデモを一時的に中断します。

2. jQuery内では、同様にすべてのIDをクラスに変更する必要があります。インタラクションをその特定のカード（ページ上のすべてのカードではない）に限定するには、少しリファクタリングする必要があります。 closest()、find()、およびnext() jQueryメソッドを使用すると、コードを個々のカードに適用するのに役立ちます。

3. CSSを調整します。デモでは、すべてが絶対的に配置され、中央に配置されているので、カードマークアップをコピー/ペーストするだけで、カードは互いに重なって積み重なり、追加のカードが表示されないように見えます。親<div class="make-3D-space">には、position: absoluteとposition: relative（これはデモコードのtypoです）を削除して、列を作成するために必要なCSSを追加します。

私が説明するために迅速かつ汚いデモを作っ：https://codepen.io/cameronscott137/pen/edwExe