Текущий список жидкости и выравнивание строк - PullRequest
2 голосов
/ 11 августа 2010

У меня есть жидкостная сетка, построенная из <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 толкается вниз от вышеуказанного элемента, вместо того, чтобы толкать в доступное пространство справа.

1 Ответ

2 голосов
/ 11 августа 2010

Посмотрите на приведенный ниже код.

Очевидно, что правила взлома IE и правила moz следует перенести в условные таблицы стилей , и есть некоторые проблемы с заполнением (читайте: используйтеcss reset )

но кроме этого это должно сработать ....

альтернативный текст http://img835.imageshack.us/img835/9594/example1281542227415.png

Пример

    <style type="text/css">
        ul {
            background-color:#ddddff;
            overflow:auto;
            margin:0;
            padding:0 0 0 4px;
            width:296px;
        }

        li {
            background-color:#ddffdd;
            display:inline-block;

            /* Trick FF2 into using inline-block */
            display:-moz-inline-stack;

            /* Trick IE6 into using inline-block */
            *display: inline;
            zoom:1;

            list-style-type:none;
            margin:0 0 0 -4px;

            /* Trick IE6 into enforcing min height */
            min-height:50px;
            height:auto !important;
            height:50px;

            padding: 0;
            vertical-align:top;
            width:100px;
        }

    </style>
</head>

<body>

    <ul>
            <li>apples<br />oranges<br />lemons<br />cherries</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
    </ul>

</body>

...