Жидкость встроенный список и выравнивание строк

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

источник

2010-08-11 fearofawhackplanet

почему вы не создают по-разному ул для каждой строки и дать CSS на них? – Sotiris

потому что это ** жидкость ** расположение. Я не знаю, насколько широка каждая строка. – fearofawhackplanet

.. Я работаю над решением jQuery. Я отправлю обратно, когда закончим. – Hristo

Посмотрите на код ниже.

Очевидно, что писаки IE и Мос правила должны быть перемещены в условных стили и есть некоторые вопросы, обивка (читайте: использования CSS-сброс)

, но кроме того, что это следует сделать трюк .. ..

alt text 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>

источник

2010-08-11 16:29:47 michael

Жидкость встроенный список и выравнивание строк

ответ

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