0

我一直在研究这个太久了，因为我似乎无法弄清楚如何将其余元素推到下面。

我希望 IMAGES、INFO 和 ADD TO CART 位于所有其他内容的下方，带有 . 我不敢相信我会带着这个来，但我真的被困住了。谢谢！

在此处输入图像描述

这是实时页面：

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 回答