2

div コンテナ内のものを右または下に揃える簡単な方法はありますか:

<div class="span-24 align-right last">Text appears on the right side of the layout</div>

また：

<div class="span-2" id="lots-of-content"></div><div class="span-22 last bottom">Appears at bottom of container</div>

また：

<div class="span-24 vertical-middle last">Middle of the container</div>

以下は、「topnav」を下に配置しようとしているもののサンプルです。

     <div class="container"> 
        <div class="span-16">
            <h1>Header</h1>
        </div>
        <div class="span-8 last vertical-middle">
            <div id="topnav" class="align-right"><input type="button" id="register" class="ui-button ui-state-default ui-corner-all" value="Register" /> or <button type="button" id="signin" class="ui-button ui-state-default ui-corner-all">Sign in</button></div>
        </div>
        <hr />
...
     </div>
4

1 に答える 1

3

を使用しposition: absoluteます。例えば：

.align-right {
    position: absolute;
    right: 0;
}
/* Or, alternatively, */
.align-right {
    float: right;
}

.bottom {
    position: absolute;
    bottom: 0;
}
.vertical-middle {
    position: absolute;
    top: 50%;
}

の場合、コンテンツ自体ではなく、コンテンツの上端vertical-middleが中央に配置されることに注意してください。

DIV包含がposition: relative強制的にオフセットの親（子の位置が相対的である）になること を確認してください編集：つまり、次のルールを追加します。

.container {
    position: relative;
}
于 2009-10-23T03:02:56.097 に答える