Лучшее решение - использовать малоизвестный стиль отображения, называемый table-cell.
Я должен был сделать это несколько раз. Вот как вы это делаете:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
Как это работает:
Когда анализатор видит, что существует объект UL, он обрабатывает его как таблицу, а не список. Это дает вам явное преимущество в том, что вы начинаете / действуют / как будто работаете с таблицами (но это не так!)
Затем правило запускается для класса-оболочки - это создает «ячейку таблицы». Мы не хотим помещать это в li, потому что OTHERWISE li будет действовать как ячейка таблицы. Это довольно плохо. работа заключается в том, что ваш li фактически выровнен по левому краю. Есть некоторый аргумент, является ли хорошей идеей сделать это таким образом - это «Наиболее эффективный», потому что он заставляет блочную модель соответствовать. Это ужасно, я знаю.
ПРИЧИНА плохо, что li будет рассматриваться как табличная ячейка, в том, что он не будет переноситься. Причина, по которой он не будет оборачиваться, состоит в том, что ячеистые таблицы не должны оборачиваться.
Существует еще одно решение, которое может работать, однако я его не проверял.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Это не так некрасиво, но должно работать, заставляя блочную модель принудительно выравнивать.