HTML和CSS對齊

Question

所以..這是我第一次使用stackoverflow，所以如果我犯了一個錯誤，請原諒。

我正在嘗試在此處復制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

歡迎來到SO！ 這是一個很好的第一個問題。

正如@Tyr和@vysnc在評論中所建議的那樣，簡單地復制/粘貼product-card代碼塊的最大問題是該演示利用了ID，而不是類。 W3C指出 ：

id屬性指定其元素的唯一標識符（ID）。 該值在元素的主子樹中的所有ID中必須唯一，並且必須至少包含一個字符。

因此，在該代碼塊中復制所有這些ID違反最佳做法。 這也使您的jQuery感到困惑，其中很多都局限於#product-card和#view-details等單個ID。 假設每個頁面上只有這些元素之一，當發現更多元素時，將不確定如何處理它。

Codepen代碼的編寫效率不是最高，但是我將按照以下步驟進行調試：

1. 確保您只運行該#product-card代碼塊的一個實例。 在該代碼塊中，將所有ID更改為class。 這意味着<div id="product-card">變為<div class="product-card"> ，依此類推。 請注意，顯然，這將暫時中斷您的演示。

2. 在jQuery中，您需要類似地將所有ID更改為類。 為了使互動僅限於該特定卡片（而不是頁面上的每個卡片），您將需要進行一些重構。 使用最接近的（） ， find（）和next（） jQuery方法將幫助您將代碼范圍限定為單個卡。

3. 調整您的CSS。 該演示的所有內容都絕對定位並居中，因此，如果您僅復制/粘貼卡標記，則卡將堆疊在彼此之間，從而看上去根本沒有出現其他卡。 在父<div class="make-3D-space"> ，刪除position: absolute和position: relative （這是演示代碼中的錯字），然后添加創建列所需的任何CSS。

我做了一個快速而骯臟的演示來說明： https : //codepen.io/cameronscott137/pen/edwExe