В CSS можно ли выстроить высоту встроенных блоков?

Я думал, установив поля 0 и высоту в auto, чтобы блок расширялся, чтобы соответствовать доступному пространству, но он все еще плотно обтекает блок.

.myclass {
    display: inline-block;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

http://jsfiddle.net/6NQDw/

Я хотел бы, чтобы оба ящика были одинаковой высоты, но хотите, чтобы ширина/высота div определялись их содержимым, а не указали ширину/высоту в пикселях.

Есть ли какой-то стиль заполнения/поля/выравнивания CSS или что-то подобное, что я могу использовать?

Ответы

Ответ 1

Вы можете использовать display:table-cell;, если вам требуется чистое решение CSS, но обратите внимание, что он не будет работать в IE7 (думаю, IE6 уже полностью забыт).

.myclass {
    display: table-cell;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

Поддержка кросс-браузера для отображения: table-cell

Лучше всего сделать то, что вам нужно, но JavaScript, но явно устанавливая ширину контейнеров с динамическим контентом, почти всегда является неправильным.

Ответ 2

Вы можете использовать display: table-cell;, чтобы поля соответствовали друг другу.

Ответ 3

Если вы хотите поддерживать IE7, вы не можете использовать встроенный блок или ячейку таблицы.

Просто используйте float: слева, чтобы быть в безопасности...

в противном случае вы приземлитесь, используя отдельный CSS только для IE7.

Ответ 4

Легко добавить таблицу стилей для lte ie8, reset ваших свойств для отображения: block, float: left и сделать общую ширину из 99% вместо 100%. Это вернет вам необходимую функциональность.