html - div の下部にあるスパンを移動します

Question

ボックスの下部にある「その他...」を移動したいだけです: ここにリンクの説明を入力してください

  <div id="box1">
  <span class="more">More...</span>
  </div>


.more {
    margin: 4px 4px;
    left: 0px;
    bottom: 0px;
}

#box1 {
    float: left;
    margin: 10px auto;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 120px;
    width: 500px;
}

score 8 · Accepted Answer

スパンに絶対位置を設定し、バウンディングボックスに相対位置を設定します。

<div id="box1">
    <span class="more">More...</span>
</div>


.more {
    margin: 4px 4px;
    left: 0px;
    bottom: 0px;
    position: absolute;
}

#box1 {
    float: left;
    margin: 10px auto;
    border-style: solid;
    border-width: 3px;
    border-color: #55fff3;
    height: 120px;
    width: 500px;
    position: relative;
}

実際の例については、更新された jsFiddleを参照してください。