Html <；部门>；相对定位

我有以下几点

如您所见，有一个表，左右两侧有两个div/列用于导航。所有这些都在一个主容器中。我希望所有内容都在顶部对齐，表格尽可能多地填充父对象。主容器内所有元件的高度也应匹配

---

现在，所有内容都向左倾斜，导航div/columns固定在底部。发生了什么事？我该如何解决这个问题。我什么都试过了。我试图避免固定位置或大小，因为我希望动态调整大小

这可能就是您要查找的内容，请尝试使用

float

和

width

---

如下所示：

使用百分比宽度和浮动。而且你可能需要一个div，而不是span

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>

前

街道地址
租客
租
晚的
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
sdaf
NXT

没什么大问题，请将方框对齐。如何对齐？我已经探索了很多属性。对于HTML5，“aligned”似乎被贬低了。不管怎么说，这对我来说并不管用。很多帮助，谢谢！我仍然不知道如何使这些侧柱与主容器的高度相匹配。有什么建议吗？当你向它们添加内容时，它们会扩展。否则，可以将它们设置为固定高度。如果这是你需要的，请接受这个答案：）很多，谢谢！我仍然不知道如何使这些侧柱与主容器的高度相匹配。有什么建议吗？向容器中添加高度（以像素为单位），并为容器的子容器指定高度百分比

<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>