Liste sur deux colonnes

Ola,

Je souhaiterais arriver à ce résultat compatible avec ie :
http://covertprestige.info/test/data/15-apercu-2col.png
(problème de clear qui est traité différement avec ie)

Sans avoir recours à des éléments supplémentaires : uniquement <ul><li></li></ul>

Florent, une idée?

Absolument impossible.
Désolé.

La solution serait d'adopter des inline-block au lieu des float :

ul {
  width           : 350px;
  list-style      : none;
  background      : brown;
  overflow        : hidden;
  margin          : 0;
  padding         : 0;
}

li {
  width           : 150px;
  margin          : 10px 0;
  display         : inline-block;
  vertical-align  : top;
  padding         : 0;
  zoom            : 1;
  *display        : inline;
}
 
li.pair {
  background      : red;
}

li.impair {
  background      : blue;
}

<ul>
  <li style="height:50px;" class="impair">1</li>
  <li style="height:70px;" class="pair">2</li>
  <li style="height:20px;" class="impair">3</li>
  <li style="height:55px;" class="pair">4</li>
  <li style="height:80px;" class="impair">5</li>
  <li style="height:50px;" class="pair">6</li>
  <li style="height:60px;" class="impair">7</li>
  <li style="height:40px;" class="pair">8</li>
  <li style="height:90px;" class="impair">9</li>
  <li style="height:50px;" class="pair">10</li>
  <li style="height:60px;" class="impair">11</li>
  <li style="height:80px;" class="pair">12</li>
</ul>

Modifié par Agylus (10 Apr 2009 - 15:47)

Bonjour,

Lequel des deux comportements souhaiterais-tu obtenir?

S'il s'agit du comportement standard et que tu recherches une solution pour IE6-7, la piste donnée par Agylus me semble intéressante.

S'il s'agit du comportement d'IE6-7, il n'y a à priori pas de solution, mis à part la création de deux conteneurs (un pour chaque colonne).

Merci à tous,

Excellent, c'était bien le comportement standard que je recherchais.
Une idée de ce que donne "inline-block" avec les versions antérieurs à FF3? Il me semble que cette propriété n'était pas géré avant la version 3.
Au passage, si quelqu'un à un lien de stats montrant le pourcentage d'utilisation de FF1 & FF2?

Firefox 2: pas géré. Le rendu sera celui par défaut (list-item).
Proportion de Firefox 2: dans les 2% des parts de marché globales d'après Net Applications.

Pour finir: la solution d'Agylus contient un hack. Et les hacks c'est mal. À remplacer par un mécanisme plus robuste (commentaires conditionnels, hum?). Je me demande d'ailleurs si préciser display:inline puis display:inline-block ne suffirait pas?

Florent V. a écrit :
Pour finir: la solution d'Agylus contient un hack. Et les hacks c'est mal.

Flemme de faire des commentaires conditionnels pour l'exemple.

Sinon, pour Firefox inférieurs à 3, il me semble que tu peux utiliser ça :

display:-moz-inline-block;