Ребенок в нижней части родительского div внутри ячейки таблицы

Я ищу способ поставить ребенка div в нижней части родителя div. Родитель div помещается внутри td, который имеет динамическую высоту в зависимости от содержимого строки. Я попробовал несколько попыток, включая решение position: relative и position: absolute, но это не сработало из-за динамической высоты. У кого-нибудь есть идея?Ребенок в нижней части родительского div внутри ячейки таблицы

Edit:

Я не использую таблицы для разметки. Таблица используется для отображения данных, которые динамически загружаются с сервера. Я добавил изображение, которое показывает, как два divs должны быть размещены внутри td. Родитель div не имеет определенного стиля на данный момент. Мне не нужно поддерживать старые версии IE. Сайт будет использоваться в первую очередь с последними версиями Firefox, Chrome и Safari.

layout http://img29.imageshack.us/img29/5271/e49.png

источник

2013-09-08 knoefel

Нужно ли вам поддерживать старый IE? –

Является ли ребенок 'div' самой динамической высотой? –

обновил мой ответ с другой скрипкой - http://jsfiddle.net/LRy6h/3/ – lukeocom

Вы должны иметь возможность расположить дочерний div, используя абсолютное позиционирование. Установите родительский div в относительное положение, а затем child - в абсолютное и нижнее: 0; Затем вам нужно будет отрегулировать вертикальный выравнивание элементов <td>, если вы хотите, чтобы родительский div также находился внизу.

ваш CSS будет что-то вроде -

div#container{width:200px;height:200px; 
    border:1px solid #666; 
    position:relative; 
} 

div#bottom{ 
    width:100px;height:100px; 
    border:1px solid #f00; 
position:absolute;bottom:0; 
}

здесь образец jsfiddle - http://jsfiddle.net/LRy6h/

и один, где родительский DIV также в нижней части - http://jsfiddle.net/LRy6h/1/

и один с изменяемым размером (динамические) высоты - http://jsfiddle.net/LRy6h/2/

и еще один в соответствии с вашим обновленным изображением - http://jsfiddle.net/LRy6h/3/

источник

2013-09-09 00:44:21 lukeocom

Извините, но я должен написать ответ вместо добавления комментария (не хватает репутации).

Звучит так, как будто вы используете таблицу для макета - это не очень хорошая идея! ;-)
Кроме того, было бы полезно, если вы разместите соответствующий код HTML и CSS или даже лучше настройте jsFiddle.

Как вы создаете родительский DIV?
Нет способа перекрестного браузера, чтобы установить его на высоту TD (только с использованием CSS). «Современный» способ может использовать «flexbox». Но это зависит от браузеров (и версий), которые вы должны поддерживать, и макета, который вы хотели бы достичь.

Использование 'position: relative' на элементах таблицы также не работает, потому что поведение для этого «неопределено».

Чтобы действительно дать вам хороший совет, информация отсутствует.

источник

2013-09-08 22:44:07 Netsurfer

вам было 49 лет, я дал вам пропавший 1, теперь вы можете комментировать где угодно. :) –

@coding freak: Большое спасибо! – Netsurfer

Я нашел другой способ решить проблему. Я установил height соответствующего tr, а также height из td и родителя div на 100%.Вот фрагмент кода:

html + css: 

<tr style="height: 100%;" ng-repeat="order in orders"> 
    <td style="height: 100%;" > 
    <div style="height: 100%; position:relative;"> 
     <span>PARENT - SOME TEXT</span> 
     <div style="position:absolute; bottom: 0;" >CHILD</div> 
    </div> 
    </td> 
</tr>

источник

2013-09-10 11:31:14 knoefel

Ребенок в нижней части родительского div внутри ячейки таблицы

ответ

Смежные вопросы