0

残りの要素の下にプッシュする方法がわからないように見えるので、私はこれに長い間取り組んできました。

IMAGES、INFO、およびADD TO CARTを、。を使用して他のすべてのコンテンツの下に配置したいと思います。これでSOに来るなんて信じられませんが、本当に行き詰まっています。ありがとう！

ここに画像の説明を入力してください

ライブページは次のとおりです。

https://fine-grain-2.myshopify.com/products/the-bowden-brown-cherry#

HTMLは次のとおりです。

<article id="product-details">
    <section class="one columns alpha" id="images">TEST
    </section>
    <section class="one columns" id="info">
        <div>
            <div>
                <h2>{{ product.title | upcase }}</h2>
                {% for variant in product.variants %}
                <h3>{{ variant.title }}</h3>
                {% endfor %}
            </div>
            <div>
                <p>{{ product.description }}</p>
            </div>
                <h1>What Sets It Apart?</h1>
            <div>
                <p>This sleeve.</p>
            </div>
        </div>
  </section>
  <section class="one columns omega" id="buy">TEST3</section>

  <footer id="options">
      <a class="four columns alpha images" href="#">
        <span>IMAGES</span>
      </a>
      <a class="four columns info" href="#">
        <span>INFO</span>
      </a>
      <a class="four columns omega buy" href="#">
        <span>ADD TO CART</span>
      </a>
  </footer>

</article><!-- product-details -->

CSSは次のとおりです。

/*-----Product Page-----*/

#galleria {
    position: relative;
    z-index: 1;
}

#product-details { 
    position: relative;
    z-index: 2;
}

.galleria-container, .galleria-stage, 
.galleria-images , .galleria-image img , .galleria-image-nav, 
.galleria-image-nav-left, .galleria-image-nav-right, 
.galleria-thumbnails-container, .galleria-info, 
.galleria-tooltip {
    margin: 0;
    padding: 0;
}

.four.columns.images, .four.columns.info {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    margin: 0 30px 0 0;
    padding: 10px 0 5px;
    text-align: center;
}

.four.columns.buy {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    margin: 0 0 0 0;
    padding: 10px 0 5px;
    text-align: center;
}

#options {
    bottom: 0;
    padding-top: 16px;
    position: absolute;
}

#info, #buy {
    visibility: hidden;
    cursor: pointer;
}

#product-details section {
    background: none repeat scroll 0 0 rgba(218, 218, 210, 0.5);
}

footer {
    margin: 0;
    padding: 0;
}
4

1 に答える 1

0

あなたのフッターが相対に設定されている記事内の絶対位置要素であるかどうかを確認する主な問題。

問題は、要素内のコンテンツが左にフロートするように設定されているため、記事タグの高さがコンテンツの長さと等しくないことです。

私はあなたのCSSを少しいじりました、そしてこれらのオプションのどちらかがあなたを始めるでしょう：

  • 絶対位置を削除すると、パディングやマージンを微調整する必要があります。ただし、非表示のセクションはいくつかの問題を引き起こします。
  • このアイテムのフローティングとインライン表示をオフにします：.column、.columns。次に、絶対位置の下限値を調整する必要があると思います。

幸運を

于 2013-02-10T18:43:45.390 に答える