Question

我一直在研究这个问题的时间太长了，因为我似乎无法弄清楚如何将其他元素推到下面。

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

enter image description here

这是实况页面：

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;
}

Answer 1

如果你的页脚是文章中设置为相对的绝对位置元素，我看到的主要问题。

问题是元素中的内容设置为浮动左侧，使文章标记的高度不等于内容的长度。

我做了一些快速搞乱你的CSS，这些选项中的任何一个都可以让你开始：

删除绝对定位，您需要调整一些填充和/或边距。但是，您的隐形部分确实会导致一些问题。
关闭浮动并在此项目上显示内联：.column，.columns。然后我认为你只需要调整绝对位置的最低值。

祝你好运

如何将<footer>定位在元素的其余部分</footer>之下

1 个答案: