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。

像这里：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>

<div>相对定位</div>

2 个答案: