0

我有以下。

完整代码链接

.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/列固定在底部。到底是怎么回事？我该如何解决。我已经尝试了一切。我试图避免固定位置或大小，因为我想要动态调整大小。

4

2 回答 2

1

使用百分比宽度和浮点数。此外，您可能希望这里有一个 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>
于 2013-09-20T21:11:16.113 回答
1

这可能是您正在寻找的内容，请尝试使用float和width。

喜欢这里：jsfiddle

于 2013-09-20T21:06:18.410 回答