CSS：divの一番下にリンクを貼る

Question

私は、ページの半分の長さと幅を持っているdivを持っています。私は下に貼り付けたい2つのリンクを持っていますdivのうち、デスクトップビューでもモバイルビューでも、表示されたままになります（position：fixedなど）。ここ

は、マークアップです：

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

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>