html - 相対位置

Question

私は次のものを持っています。

完全なコード リンク

.rent-roll-container {
    background: green;
    height: 100%;
}
.rent-roll-month-nav {
    background: blue;
    display: inline-block;
    height: 100%;
}
.rent-roll-table {
    background: red;
    display: inline-block;
    height: 100%;
}

ご覧のとおり、ナビゲート用に左右に 2 つの div/列があるテーブルがあります。これらすべてが 1 つのメイン コンテナに入っています。すべてを上部とテーブル全体に揃えて、親をできるだけ多く埋めたいと思います。また、メイン コンテナ内のすべての要素の高さが一致する必要があります。

現在、ナビゲーション div/columns が下部に固定され、すべてが左に縮んでいます。何が起こっている？これを修正するにはどうすればよいですか。私はすべてを試しました。動的なサイズ変更が必要なため、位置やサイズの固定を避けようとしています。

Answer 1

これはあなたが探しているものかもしれません。 と を使ってみてfloatくださいwidth。

ここのように：jsfiddle

Answer 2

パーセンテージ幅とフロートを使用します。また、ここではスパンではなく div が必要になるでしょう。

http://jsfiddle.net/wf55h/

CSS

.rent-roll-container {
    background: green;
    height: 100%;
}
.rent-roll-month-nav {
    background: blue;
    width:10%;
    float:left;
}
.rent-roll-table {
    background: red;
    width:80%;
    float:left;
}

html

<div class="rent-roll-container">
    <div class="rent-roll-month-nav">
        <p>PRE</p>
    </div>
    <div class="rent-roll-table">
        <table class="table table-striped text-center">
            <thead class="text-center">
                <tr>
                    <th>Street Address</th>
                    <th>Tenant(s)</th>
                    <th>Rent</th>
                    <th>Late</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                </tr>
                <tr>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                </tr>
                <tr>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                </tr>
                <tr>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                </tr>
                <tr>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                    <td>sdaf</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="rent-roll-month-nav">
        <p>NXT</p>
    </div>
    <div style="clear:both"></div>
</div>