Question

我的html / css存在问题。我希望在我的三个部分中的每个部分都有一个“了解更多”框，位于每个部分的底部中间。

CSS

#learn {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index:1;
    margin-bottom: 20px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    text-align: center;
    line-height: 50px;
}
#learn a {
    color: black;
    font-weight: bold;
}

它似乎在顶部框中工作正常： <div id="learn"><a href="#">Learn More</a>

然而，在下面的部分中，我使用了几乎相同的代码：

<section id='a1' style="height:100%;background-color:white;">
    <div class="container"></div>
        <div id="learn"><a href="#">Learn More</a>
</section>

但是这次没有出现“了解更多”框。我做错了什么？我玩position: relative没有太多运气。

TLDR：了解更多框应位于标题和部分的底部中间，它只出现在标题中。

P.s我试图删除我的代码和css，但不想再删除，因为我相信它的包含将突出显示哪些选项将/不会工作。

Answer 1

将此添加到您的CSS：

section {
    position: relative;
}

演示：http://jsfiddle.net/9uxGq/5/

将物品放置在流体容器的底部

1 个答案: