Высота ячейки таблицы дисплея 100% выравнивание нижней части изображения

Ответ 1

Похоже, вы пытаетесь создать таблицу из 3-х столбцовых и двухстрочных строк, но используете только отдельные строки, чтобы сохранить семантику разметки. Без flexbox для распределения изображения снизу потребуется некоторая CSS-обманка.

Один пример, который должен соответствовать вашим требованиям (1) кросс-браузера, включая IE, совместимость (2) допускает произвольный текст в поле:

*{
    padding: 0;
    margin: 0;
}

#container{
    width: 500px;
    margin: 0 auto;
}

ul{
    list-style-type:none;
    display: inline-table;
}

li{
    position: relative;
    /* image width / (image height * column count) */
    padding-bottom: 11.764705882%;
    display: table-cell;
    background: red;
    /* 100 / column count */
    width: 33.333%;
}

a{
    color: white;
}

img{
    width: 100%;
    position: absolute;
    bottom: 0;
}

<div id="container">
<ul>
    <li><a href><div class="header">Xiao Huang</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    <li><a href><div class="header">Xiao Huang</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    <li><a href><div class="header">Xiao Huang Xiao Huang Xiao Haung</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    </ul>
</div>

Ответ 2

Я использую макет таблицы и пытаюсь установить высоту дочернего элемента table-cell, чтобы быть 100% его контейнера. Почему этого не происходит и как вы разрешаете это?

Я также попытался установить высоту table-cell на 100% без успеха.

При использовании процентных высот в CSS вам нужно указать высоту для всех родительских элементов, вплоть до body и включая body, и корневой элемент (html).

Из спецификации:

Свойство CSS height

процент
Определяет процентную высоту. Процент рассчитывается по отношению к высоте генерируемого окна содержащий блок. Если высота содержащего блока не является явно указан, и этот элемент не является абсолютно позиционированным, значение вычисляется как "авто".

auto
Высота зависит от значений других свойств.

Другими словами, если вы не задали явную высоту для содержащего блока (а дочерний элемент не совсем позиционирован), то ваш дочерний элемент с процентной высотой не будет иметь систему отсчета.

Таким образом, проблема вашего кода сводится к следующему: у вас не хватает height для родителей ul, #container, body и html.

DEMO: http://jsfiddle.net/sedetcc6/

Я хотел бы выравнивать ТОЛЬКО изображения в нижней части контейнера. Как это сделать на дисплее таблицы?

Хотя vertical-align хорошо подходит для выравнивания элементов в ячейке таблицы, в данном конкретном случае, поскольку каждое изображение имеет родственник, который не должен двигаться, свойство vertical-align не полезно.

Но изображения могут быть сдвинуты с абсолютным позиционированием. Попробуйте следующее:

li{
    display: table-cell;
    background: red;
    height: 100%;
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
    width: 33.33%; /* new */    
}

img{
    width: 100%;
    position: absolute; /* new */
    bottom: 0; /* new */
}

DEMO: http://jsfiddle.net/sedetcc6/1/

ПРИМЕЧАНИЯ:

• Никаких изменений в исходной надписи
• Для записи эта проблема может быть легко решена с помощью flexbox, но я понимаю, что это не вариант здесь из-за необходимости Поддержка браузера IE 8 и 9.

Ответ 3

Надеюсь, что я правильно понял проблему, но мой совет заключался в том, чтобы сделать каждый якорь display: table-cell, чтобы они были вынуждены на одну и ту же высоту, а затем вы можете расположить все элементы внутри якоря или даже использовать фоновые изображения вместо <img />

JS скрипка здесь

Ответ 4

Все, что вам нужно, это установить высоту для всех ваших элементов, например.

*{
    height: 50px;
}

Вы получите желаемый результат: http://jsfiddle.net/asimplepeter/3u3gpf2n/10/

Если количество текста будет проблемой, вы можете установить overflow: auto для своего класса .header.

Ответ 5

Ваши свойства кода и отображения, такие как "таблица" и "таблица-ячейка", верны.

• Но проблема в том, что таблицы отображаются только с автоматической высотой. Из-за этого, хотя вы установили высоту контейнера, структура таблицы не была отображена с надлежащей высотой. Таким образом, наряду с классом контейнера, установите высоту для "ul", а также
• в отношении положения изображения вы можете установить верхнюю границу поля на 100% или путем вычисления размера изображения и уменьшения этого от высоты контейнера 500px поможет вам в позиционировании.

Надеюсь, что это ответит на все ваши запросы

РЕДАКТИРОВАТЬ. При установке поля увеличивается высота таблицы, в качестве альтернативы вы можете использовать свойство css, как показано ниже

transform: translateY(Y);
transform-origin: left top;

Ответ 6

В этом случае я бы подумал, что лучше mantain высота ячейки в соответствии с img, потому что она статична и задает заголовок как абсолютный.

Что-то вроде этого:

li{
    position: relative;
    display: table-cell;
    background: red;
    height: 100%;
    vertical-align: bottom;
}



.header{
    width: 100%;
    position: absolute;
    display: block;
    color: white;
    background: blue;
}

http://jsfiddle.net/3u3gpf2n/12/