html - CSS:在div的底部粘贴一个链接

Question

我有一个 div，它正好位于页面的中心，并且具有页面的一半长度和宽度，我有 2 个链接，我想将它们粘贴到 div 的底部并保持可见(如位置:固定) 无论是在桌面 View 还是移动 View 中。

这是标记:

<div id="box2" class="box">
            <span class="head">
                Something about you:
            </span>
            <span class="main">

            </span>
            <span class="bottom">
                <a type="button" class="nxt">Next</a>
                <a type="button" class="prv">Previous</a>
            </span>

这是我试过的 css:

    .box {
    position: absolute;
    width: 50%;
    background-color: white;
    height: 500px;
    text-align: center;
    border: 3px solid black;
    left: 50%;
    top: 100px;
    margin-left: -25%;
    overflow: auto;
}
.box .bottom{
    display: block;
    max-width: 100%;
    overflow: auto;
    color: black;
    padding: 10px;
    position: relative;
    bottom: 0px;

}
.box .bottom .nxt{
    float: right;
    cursor: pointer;
    color: #0088CC;
}
.box .bottom .prv{
    float: left;
    cursor: pointer;
    color: #0088CC;
}

我不想让任何东西(头部或主跨)干扰“底部”跨度的位置，但无法获得所需的结果，甚至无法关闭。请帮忙

Answer 1

为了使链接固定在底部，您必须给 .bottom 一个绝对或固定的位置。但是接下来需要进行一些调整:

.box {
    position: absolute;
    width: 50%;
    background-color: white;
    height: 500px;
    text-align: center;
    border: 3px solid black;
    left: 50%;
    top: 100px;
    margin-left: -25%;
    overflow: auto;
}
    
.box .bottom {
    display: block;
    width: 100%;
    overflow: auto;
    color: black;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0px;
}

.box .bottom .nxt {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #0088CC;
}

.box .bottom .prv {
    float: left;
    cursor: pointer;
    color: #0088CC;
}

<div id="box2" class="box">
    <span class="head">
        Something about you:
    </span>
    <span class="main"></span>
    <span class="bottom">
        <a type="button" class="nxt">Next</a>
        <a type="button" class="prv">Previous</a>
    </span>
</div>