html - 親 div の左下隅にある div の行

Question

s というラベルの付いたボタンを、現在の場所 (左上隅) ではなくDiv、親の左下隅に配置したいと思います。div各divの絶対位置を個別に使用せずにこれを行う方法はありますか? HTMLとCSSはこちら。

CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}

HTML

<div id="banner">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
</div>

Answer 1

これを css に追加します。

#buttonrow {
    position: absolute;
    bottom: 0;
    right: 0;
}

マークアップを変更して、ラッパー div を含めます。

<div id="banner">

<div id="buttonrow">

<div class="button" >Home</div>
<div class="button">About Us</div>
<div class="button">Contact Us</div>
<div class="button">Disciplines</div>

</div>

</div>

Answer 2

position:absoluteを設定することで .ie を使わなくてもできますmargin。

これを試して：

.button {
background-color: #008000;
bottom: 0;
color: #0000FF;
float: left;
font-family: "Comic Sans";
font-size: 20pt;
margin-top: 268px;
position: relative;
width: 200px;
}

デモ: http://jsfiddle.net/z5UNd/

Answer 3

nav タグを使用して、水平方向のリスト ビューを作成できます。