Создание строки divs будет одинаковой высоты с использованием CSS

У меня есть строка divs, каждая из которых должна быть одинаковой высоты, но я не могу понять, что эта высота может быть впереди времени (содержимое происходит от внешний источник). Сначала я попытался поместить divs в закрытый div и оставил их влево. Затем я установил их высоту как «100%», но это не имело заметного эффекта. Установив высоту на охватывающем div на фиксированную высоту, я мог бы затем развернуть плавающие divs, но только до фиксированной высоты контейнера. Когда содержимое в одном из divs превысило фиксированную высоту, оно разлилось; плавающие divs отказались расширяться.Создание строки divs будет одинаковой высоты с использованием CSS

Я искал эту проблему с использованием float-divs-of-the-the-same-height и, видимо, нет способа сделать это с помощью CSS. Поэтому теперь я пытаюсь использовать комбинацию относительного и абсолютного позиционирования вместо поплавков. Это CSS:

<style type="text/css"> 
div.container { 
    background: #ccc; 
    position: relative; 
    min-height: 10em; 
} 
div.a { 
    background-color: #aaa; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    width: 40%; 
} 
div.b { 
    background-color: #bbb; 
    position: absolute; 
    top: 0px; 
    left: 41%; 
    bottom: 0px; 
    width: 40%; 
} 
</style>

Это упрощенная версия HTML:

<div class="container"> 
    <div class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div> 
    <div class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div> 
    </div>

Это работает, если вы не измените мин-высоту что-то вроде 5em (demonstranting, что происходит, когда содержание превышает минимальная высота), и вы можете видеть, что, хотя текст не обрезается, div все еще отказываются расширяться. Теперь я теряюсь. Есть ли способ сделать это с помощью CSS?

источник

2008-12-16 Anonymous

* cough *

* cough * ;-) – 2008-12-16 06:34:42

ответ

Создание их точно такой же высоты может быть сложной задачей, но если они просто должны быть одинаковой высоты, вы можете взглянуть на технику faux columns.

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

источник

2008-12-16 06:05:30 seanb

Вы можете использовать JavaScript, но, разумеется, он будет разбит без включенного JavaScript. Тогда есть таблицы, но это разрушает точку CSS. Возможно, seanb's answer может работать, поместить фоновое изображение, которое создает иллюзию, что все столбцы идут вниз. Это называется искусственной фоновой техникой.

Или сидите плотно и подождите display: table-cell для поддержки всех/большинства браузеров.

источник

2008-12-16 06:18:18 alex

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

Я первый, кто сбивает не смысловые образцы, поверьте мне, но иногда вам приходится сталкиваться с тем, что CSS + семантическая разметка не работает для всех сценариев проектирования. Я не знаю требований к доступности этого сайта, но я бы рекомендовал вам рассмотреть более практическое решение этой проблемы.

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

Какой бы вы ни выбрали, пожалуйста, не придерживайтесь стандарта самостоятельно.

источник

2008-12-16 06:29:30

Хорошо, маловероятно, что кто-нибудь пострадает, если вы используете стол ... – seanb 2008-12-16 06:36:21

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

источник

2008-12-16 07:20:32

Таблицы это! Если вы чувствуете себя очень плохо об этом через несколько лет, вы можете переключить их на divs и использовать display: table-cell ... – alex 2008-12-16 23:37:31

ОК, дело стола оказалось немного сложнее, чем я думал. Это оказалось, что решение Javascript на самом деле является самым простым (для моей ситуации), так как мой . приложение является приложением AJAX и структура использует Prototype.js Все это занимает несколько строк JS:

$$('div.container').each(function (element) { 
var longest = 0; 

element.descendants().each(function (child) { 
    if (child.getHeight() > longest) 
    longest = child.getHeight(); 
}); 

element.descendants().each(function (child) { 
    child.style.height = longest + 'px'; 
}); 
});

Еще раз спасибо за помощь

источник

2008-12-17 11:03:59

, если ищете чисто CSS вариант, и. вы можете выделить фон блока из содержимого, а ответ - два бита кода для каждого блока, один для контента, один для фона. это делается:

<div id="wrapper"> 
    <div class="content" id='one> 
    <div class="content" id="two> 
    <div class="content" id="three> 
    <div class="background" id="back-one"> 
    <div class="background" id="back-two"> 
    <div class="background" id="back-three"> 
</div>

Поместите содержимое divs с помощью поплавков. Затем поместите фоны, используя абсолютное позиционирование (и индекс z, чтобы поместить их позади).

Это работает, потому что поплавки могут устанавливать высоту, а абсолютно позиционированные элементы могут иметь высоту 100%. Это немного грязно, но делает работу.

источник

2008-12-17 11:12:09

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