Alignement des lignes et alignements de fluides

J'ai une grille fluide constituée de <li> éléments.Alignement des lignes et alignements de fluides

par exemple:

<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; 
}

donc cela ressemble quelque chose comme:

----------- ----------- ----------- 
|   | |   | |   | 
|   | |   | |   | 
----------- ----------- ----------- 

----------- ----------- ----------- 
|   | |   | |   | 
|   | |   | |   | 
----------- ----------- -----------

hourra!

Le problème est lorsque j'ajoute du contenu dans l'un des <li> éléments qui s'étend la hauteur. Je veux finir avec quelque chose comme ceci:

----------- ----------- ----------- 
| apples | |   | |   | 
| oranges | |   | |   | 
| lemons | ----------- ----------- 
| cherries| 
----------- 

----------- ----------- ----------- 
|   | |   | |   | 
|   | |   | |   | 
----------- ----------- -----------

Mais je finis en fait avec quelque chose comme ceci:

----------- ----------- ----------- 
| apples | |   | |   | 
| oranges | |   | |   | 
| lemons | ----------- ----------- 
| cherries| 
----------- ----------- ----------- 
       |   | |   | 
       |   | |   | 
       ----------- ----------- 

----------- 
|   | 
|   | 
-----------

booo!

Donc, fondamentalement, j'essaie de garder la 'ligne' alignée quand l'un des <li> s est poussé vers le bas à partir de l'élément ci-dessus, au lieu de pousser vers l'espace disponible vers la droite.

Source

2010-08-11 fearofawhackplanet

pourquoi vous ne créez pas différents ul pour chaque ligne et donnent sur eux css? – Sotiris

parce que c'est une mise en page ** fluide **. Je ne sais pas large chaque rangée sera. – fearofawhackplanet

.. Je travaille sur une solution jQuery. Je posterai quand j'aurai fini. – Hristo

Regardez le code ci-dessous.

Il est évident que les hacks IE et les règles moz doivent être transférés dans stylesheets conditionnelle et il y a des problèmes de remplissage (lire: utiliser un autocommutateur remis à zéro)

mais autre que cela devrait faire l'affaire .. ..

alt text http://img835.imageshack.us/img835/9594/example1281542227415.png

Exemple

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

Source

2010-08-11 16:29:47 michael

Alignement des lignes et alignements de fluides

Répondre

Questions connexes