<div> Относительное позиционирование

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/столбцами слева и справа для навигации. Все это в одном основном контейнере. Я хочу, чтобы все выровнялось по вершине и таблице, чтобы заполнить как можно больше родителей. Также должна соответствовать высота всех элементов внутри основного контейнера.

Прямо сейчас все сглажено влево, при этом навигационные divs/columns привязаны к основанию. Что происходит? Как это исправить. Я все пробовал. Я стараюсь избегать фиксации позиции или размера, так как мне требуется динамическая калибровка.

Теги:

2 ответа

1
Лучший ответ

Это может быть то, что вы ищете, попробуйте использовать float и width.

Как здесь: jsfiddle

Поделиться
  • 0
    Большое спасибо за помощь! Я до сих пор не знаю, как заставить эти боковые столбцы соответствовать высоте основного контейнера. Какие-либо предложения?
  • 1
    добавить высоту в пикселях к контейнеру и указать процентную высоту для дочерних элементов контейнера jsfiddle
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>
Поделиться
  • 0
    Большое спасибо за помощь! Я до сих пор не знаю, как заставить эти боковые столбцы соответствовать высоте основного контейнера. Какие-либо предложения?
  • 0
    Они будут расширяться, когда вы добавите к ним контент. В противном случае вы можете установить их на фиксированную высоту. Пожалуйста, примите это как ответ, если это то, что вам нужно :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню