Question

我想要一个看起来像这样的网格：

  grid-template-areas:  ". . name . ."
                        ". accordion product options ."
                        ". custom bullets description ."
                        ". . . . .";

但是目前它的显示更像是这样（如果这是合法的）：

  grid-template-areas:  ". . name . ."
                        ". accordion product options ."
                        ". . . custom&bullets&description ."
                        ". . . . .";

我长时间盯着这个......它可能会遗漏一些简单的东西。

这是我所看到的图片：

这是我的代码：

<ac:pagelayout id="ProductDetailsPage" showswatchnexttovariantoption="True" renderswatchesasunorderedlist="True" thumbheight="75" usetabs="True" productpicwidth="500" swatchimageheight="30" swatchposition="Below" thumbwidth="75" productpicheight="500" swatchimagewidth="30" thumbmaxcols="4">
  ##INCLUDESTYLESHEET[/store/inc/bxslider/jquery.bxslider.css]##
  <div itemscope="" itemtype="http://schema.org/Product">





    <style>
    #gridContainer{
      display: grid;
      width:97vw;
      height:75vh;
      font-size:100vh 100vw;
      opacity:40%;
      grid-template-areas:  ". . name . ."
                            ". accordion product options ."
                            ". custom bullets description ."
                            ". . . . .";
      grid-template-rows: 10fr 40fr 40fr 1fr;
      grid-template-columns: 10fr 15fr 45fr 20fr 10fr;
    }
    #name{
      grid-area: name;
      background-color: crimson;
      width: 100%;
      height: auto;
    }
    #accordion{
      grid-area: accordion;
      background-color: red;
      width: 100%;
      height: auto;
    }
    #product{
      grid-area: product;
      background-color: lightblue;  
      width: 100%;
      height: auto;
    }
    #options{
      grid-area: options;
      background-color: green;
      width: 100%;
      height: auto;
    }
    #custom{
      grid-area: custom;
      background-color: purple;
      width: 100%;
      height: auto;
    }
    #bullets{
      grid-area: bullets;
      background-color: orange;
      width: 100%;
      height: auto;
    }
    #description{
      grid-area: description;
      background-color: violet;
      width: 100%;
      height: auto;
    }
    </style>


    <div class="row">
      <div id='gridContainer'>
        <div id="name">
          <h1 id="ProductDetailsProductName" class="no-m-t"><span itemprop="name">$$PRODUCTNAME$$</span></h1>
          <div style="display:none;">
              <ac:visibilityarea id="ReviewRatingArea">
                    <div class="ProductDetailsReviewDisplay clear">
                      <div id="dvAverageReviewRatingStars" class="ProductDetailsReviewRatingStars in-block v-mid">
                        $$AVERAGEREVIEWRATINGSTARS$$
                      </div>
                      <div class="ProductDetailsReviewRatingCount in-block v-mid">
                        ##IF[ReviewCount!=0]##
                        <span itemprop="review" itemscope="" itemtype="http://data-vocabulary.org/Review-aggregate">
                          <span itemprop="rating">##AVERAGERATING##</span> stars, based on <span itemprop="count">##REVIEWCOUNT##
                          </span> reviews
                        </span>
                        $$REVIEWCOUNTLINK$$.
                        ##ELSE##
                        There are no reviews yet.
                        ##ENDIF##
                        | $$WRITEREVIEWLINK$$
                      </div>
                    </div>
                  </ac:visibilityarea>
          </div>
          <div class="" itemprop="breadcrumb">
          $$CATEGORYTRAIL$$
          </div>
          <script>
              $('h1#ProductDetailsProductName').html(function(index, curHTML) {
                var text = curHTML.split(/[\s-]/),
                    newtext = '<span style="color: #103a71;">' + text.pop() + '</span>';
                return text.join(' ').concat(' ' + newtext);
              });
          </script>
        </div>

        <div id="accordion">
          <ul id="SideNavProductDetails" class="nav flex-column"> <a class="nav-link active" href="#">Nicky's Folders</a>
            <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
          </ul>
        </div>

        <div id="product">
          <div class="product-wrapper">
            <div class="cent">
              <ac:layoutarea id="PhotoArea">
                <a href="$$LINKHREF$$" itemprop="image" class="main-product-photo block zoom rel">
                  $$MAINPHOTO$$
                  <!--<div class="caption">$$CAPTION$$</div>-->
                </a>
                <ac:visibilityarea id="lvCarousel">
                  <div class="pad-20 no-pad-lr">
                    $$THUMBNAILS$$
                  </div>
                </ac:visibilityarea>
              </ac:layoutarea>
              <ac:layoutarea id="PhotoThumbLayout">
                <ul class="product-thumbnails no-padding">$$GROUP$$</ul>
              </ac:layoutarea>
              <ac:layoutarea id="PhotoThumbGroup">
                $$ITEM$$
              </ac:layoutarea>
              <ac:layoutarea id="PhotoThumb">
                <li class="no-padding"><a href="$$THUMBLINKHREF$$" class="thumbnail">$$THUMBNAIL$$</a></li>
              </ac:layoutarea>
              <ac:visibilityarea id="Featured">
                <div class="abs product-flag left top featured"><span>Featured!</span></div>
              </ac:visibilityarea>
              <ac:visibilityarea id="Spotlight">
                <div class="abs product-flag left bottom spotlight"><span>Spotlight!</span></div>
              </ac:visibilityarea>
              <ac:visibilityarea id="Flag1">
                <div class="abs product-flag right top flag1"><span>New!</span></div>
              </ac:visibilityarea>
              <ac:visibilityarea id="Flag2">
                <div class="abs product-flag right bottom flag2"><span>Hot!</span></div>
              </ac:visibilityarea>
              <ac:visibilityarea id="Flag3">
                <div class="abs product-flag right bottom flag3"><span>Sale!</span></div>
              </ac:visibilityarea>
            </div>
          </div>
        </div>

        <div id="options">
          <h2  id="ProductDetailsCustomImprintingLink" class="ProductDetailsProductName no-m-t">Choose Your <span itemprop="name" style="display:inline-block">##MFGPARTNUMBER##</span></h2>
          <ac:visibilityarea id="ProductDetailsArea">
            <ac:visibilityarea id="ProductVariations">
              <div class="panel">
                <div class="ProductDetails pad-10 no-pad-t">
                  <!--##TELLAFRIEND##-->
                  <div id="dvProductVariations" class="ProductDetailsVariations full-input">
                    <div style="display:none">
                      <ac:layoutarea id="Personalization">
                        <div class="ProductDetailsVariations pad-b-20">
                          <div><strong>$$PERSONALIZATIONQUESTION$$</strong></div>
                          $$PERSONALIZATIONCONTROLS$$
                        </div>
                      </ac:layoutarea>
                    </div>
                    <ac:layoutarea id="Variant">  
                      <div class="pad-b-20 Variant">
                        <div><strong>
                          $$VARIANTGROUPNAME$$ 
                          $$VARIANTGROUPHEADER$$  
                          </strong>
                        </div>
                        $$VARIANTGROUPCONTROLS$$    
                        <ac:visibilityarea id="VariantGroupSwatches"> 
                          <div class="clearfix">
                            $$VARIANTGROUPSWATCHES$$
                          </div>
                        </ac:visibilityarea>            
                        $$VARIANTGROUPFOOTER$$
                      </div>
                    </ac:layoutarea>
                    <br>
                    <span class="ProductDetailsVariations">$$UPDATELINK$$</span>
                    <ac:visibilityarea id="DetailedConfiguration">
                      <span>$$DETAILEDCONFIGLINK$$</span>
                    </ac:visibilityarea>
                  </div>
                </div>
              </div>
            </ac:visibilityarea>
          </ac:visibilityarea>
          <div class="row">
            <div class="col-md-6">
              <ac:visibilityarea id="AddToCartArea">
                <div class="panel">
                  <div id="dvProductQuantity" class="ProductDetailsQuantity qty-wrapper pad-10 no-pad-t" data-qty-min="##MINQUANT##" data-qty-max="##MAXQUANT##" data-qty-inc="##MULTIPLESOFQUANT##">
                    $$QUANTITYLABEL$$
                    $$QUANTITY$$
                    $$ADDTOCART$$
                    <ac:if setting="Show Quantity Spinner (Product)">
                      <script>
                        $(function(){
                          $(".ProductDetailsQuantityTextBox").qtySpinner()
                        });
                      </script>
                    </ac:if>
                    <ac:visibilityarea id="ibtnAddToWishlist">
                      <ac:if setting="Show Wishlist Button">
                        <div class="pad-10">$$ADDTOWISHLIST$$</div>
                      </ac:if>
                    </ac:visibilityarea>
                  </div>
                </div>
                <div style="display:none">
                  <ac:visibilityarea id="ShippingEstimationArea">
                    <div id="dvShippingEstimationLink" class="ProductDetailsShippingEstimationLink">
                      <a class="estimate-shipping" href="/store/ShippingEstimation.aspx?ItemID=##ITEMID##">Estimate Shipping</a>
                    </div>
                  </ac:visibilityarea>
                </div>
              </ac:visibilityarea>
            </div>
            <div class="col-md-4">
              <ac:visibilityarea id="PricingArea">
                <div class="panel">
                  <div id="dvProductPricing" class="ProductDetailsPricing pad-10 no-pad-t" itemprop="offers" itemscope="" itemtype="http://data-vocabulary.org/Offer">
                    <meta itemprop="seller" content="##STORENAME##">
                    <div>$$RETAIL$$</div>
                    <div>$$WASPRICE$$</div>
                    <div class="h1" itemprop="price">$$PRICE$$</div>
                    <div>$$YOUSAVE$$</div>
                    <div>$$MAPPRICINGLINK$$</div>
                    <div>$$DISCOUNTLIST$$</div>
                    <small>
                      <div>$$REWARDPOINTSTOPURCHASE$$</div>
                      <div>$$REWARDPOINTSEARNED$$</div>
                      <div>$$BONUSREWARDPOINTSEARNED$$</div>
                    </small>
                  </div>
                </div>
              </ac:visibilityarea>          
            </div>
          </div>

          <div id="custom"> 
            <h2  id="ProductDetailsCustomImprintingLink">Custom Imprinting</h2>
            <div><a href="rochester100.com/customimprinting">Click here </a> to use our interactive tools to customize the products you want.
            </div>
          </div>

          <div id="bullets">    
            <ac:visibilityarea id="BulletsArea">
              <div class="panel">
                <div class="pad-10 no-pad-t">
                  <small>
                    $$BULLETS$$
                  </small>
                </div>
              </div>
            </ac:visibilityarea>
          </div>

          <div id="description">    
            ##LONGDESCRIPTION1##
          </div>
        </div>
      </div>
    </div>
    </div>
</ac:pagelayout>

css网格模板区域显示incorreclty

0 个答案: