У меня есть жидкостная сетка, построенная из <li>
элементов.
Например:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
li
{
border:solid 1px green;
width: 100px;
min-height:50px;
display: inline;
margin: 10px;
float: left;
}
, так что это выглядит примерно так:
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
ура!
Проблема в том, что я добавляю контент в один из элементов <li>
, который увеличивает высоту.Я хочу в конечном итоге что-то вроде этого:
----------- ----------- -----------
| apples | | | | |
| oranges | | | | |
| lemons | ----------- -----------
| cherries|
-----------
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
Но на самом деле я получаю что-то вроде этого:
----------- ----------- -----------
| apples | | | | |
| oranges | | | | |
| lemons | ----------- -----------
| cherries|
----------- ----------- -----------
| | | |
| | | |
----------- -----------
-----------
| |
| |
-----------
Booo!
Так что в основном яя пытаюсь сохранить выравнивание строки, когда один из <li>
s толкается вниз от вышеуказанного элемента, вместо того, чтобы толкать в доступное пространство справа.