Css - минимальная высота по количеству строк

Ответ 1

Вы должны использовать clearfix hack

Это позволит вам выровнять ваши divs без указания высоты. Это как разделитель строк:

=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================      
{clearfix}
=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          =====================
=====================      adipiscing elit.
                           =====================

Вы все равно можете установить высоту/маржу для каждого div, конечно:

ИЗМЕНИТЬ:

Для внутреннего равного размера без использования таблиц у вас есть несколько решений:

Используя overflow:hidden для родителя и дополнительного margin-bottom для детей, если вы используете только фон.

Использование атрибута display-table (метод 1)

Или используя javascript (метод 3)

Ответ 2

Почему вы так против идеи установки min-height в ems? Если у вас есть line-height, установленный в ems, умножьте это на три и получите желаемую высоту!

div {
    line-height:1.5em;
    min-height:4.5em;
    float:left;
    width:33%;/*close enough*/
}

Скрученный

Обновление: установка min-height в три строки - это упражнение в бесполезности - оно не учитывает сценарии, в которых контент не вписывается в доступное пространство. Вы могли бы использовать faux columns вместо того, чтобы сделать контент видимым одинаковой высоты внутри строки

Ответ 3

Я выполнил это, используя flexbox и min-height.

Пусть каждый из ваших div элементов в контейнере flexbox должен иметь одинаковые высоты и реагировать реагировать (т.е. использовать контрольные точки, flexbox wrap и min-width, чтобы гарантировать, что вероятность имеет более 3 строк текста). Затем для каждого из ваших внутренних элементов установите значения min-height и line-height, такие как @o.v. предложил. min-height должен быть равен font-size * line-height множителю.

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

HTML

<div class="flex-container">
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>

CSS

div.flex-container {
  display: flex;
}
div.flex-container p {
  font-size: 1em;
  line-height: 1.125; // Default is 1.2, but varies by browser
  min-height: 2.25em; // 2 * 1em * 1.125
                      // (number of lines) * (font-size) * (line-height multiplier)
}

Ответ 4

Я не знаю, зачем вам это нужно... но вы можете исправить высоту и ширину класса div в соответствии с размером шрифта, который вы собираетесь использовать. скажем, ваш размер шрифта составляет 10 пикселей, и вы собираетесь использовать 10 пикселей, а затем используйте divs с высотой 50 пикселей. Затем добавьте margin-bottom в те divs, и вы хорошо пойдете, я думаю!