Question

我有一个div，它位于页面的正中心，并且具有页面的一半长度和宽度，我有2个链接，我想要粘贴到div的底部并保持可见（如位置：固定））无论是在桌面视图还是移动视图中。

这是标记：

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

我不希望任何东西（头部或主跨）扰乱＆＃34;底部＆＃34;但是，不能得到所需的结果，甚至不能接近。请帮忙

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

改变了很多东西。也许你可以从这里开始：https://jsfiddle.net/6bcd79dx/

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

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

            </div>

CSS：在div的底部粘贴一个链接

2 个答案: