<div>相对定位

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%;
}

如您所见，有一个表，其中两个div/列位于左侧和右侧，用于导航。所有这些都在一个主容器里。我希望所有的东西对齐顶部和表格，以填补尽可能多的父。此外，主容器内所有元素的高度都应该匹配。

现在，所有东西都向左缩窄，导航div/列锚定在底部。怎么一回事？我该怎么解决这个问题。我什么都试过了。我试图避免固定位置或大小，因为我想要动态大小。

Answer 1

这可能是您要寻找的，尝试使用float和width。

就像这里：小提琴

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>