28172 sujets

CSS et mise en forme, CSS3

Tri en colonne

Bonjour,

je me demande s'il est possible d'obtenir le résultat suivant de façon simple en css :

dans un conteneur, je dispose de blocs de deux types, distingués par exemple par leur classe, mélangés - c'est à dire qu'on passe alternativement d'un bloc à l'autre ; je souhaite afficher en deux colonnes d'un côté les blocs du premier type, de l'autre ceux du second type, évidemment en faisant en sorte que chaque colonne se prolonge continument ; la propriété float (left et right) sépare bien mes blocs, mais le flux dans chaque colonne n'est pas continu, chaque bloc étant positionné après le précédent, indépendamment de la colonne où il se trouve...

j'aimerais éviter de séparer les blocs dans la structure logique ; est-ce possible ?

Merci !
Si je comprends bien, on part de la structure (X)HTML suivante :
<div id="conteneur">
  <div class="contenu impair">Lorem ipsum dolor</div>
  <div class="contenu">Lorem ipsum dolor</div>
  <div class="contenu impair">Lorem ipsum dolor</div>
  <div class="contenu">Lorem ipsum dolor</div>
  <div class="contenu impair">Lorem ipsum dolor</div>
  <div class="contenu">Lorem ipsum dolor</div>
  <!-- etc. -->
</div>

Essaie d'appliquer la propriété clear aux éléments s'affichant à gauche, comme suit :
.contenu {
  width: 100px; /* Largeur à définir pour les éléments flottants */
  float: left;
}
/* Pour s'assurer que les éléments impairs soient bien les uns en-dessous des autres */
.impair {
  clear: left;
}
C'est exactement ça (on pourrait généraliser au cas où les blocs ne sont pas nécessairement alternés, mais dans mon cas particulier on peut considérer que c'est le cas) ;

il semble cependant que cette solution ne fonctionne pas... à priori le clear:left aurait plutôt tendance à faire aller à la ligne suivante le bloc, non ?

plus j'y réfléchis, et plus je me dis que ce n'est pas possible en fait...
Salut,

il faudrait repréciser ta demande car de ce que j'en ai compris la la réponse de Victor correspond bien : peut-être une image ?

Sinon pour chipoter ( Smiley cligne ) la classe contenu est inutile ici puisqu'il suffit de cibler à l'aide de 
#conteneur div
Une version prête à l'emploi du "problème" :


<html> 
	<head>
		<style type="text/css">
		#conteneur {
			width:200px;
			border:1px solid yellow;
			overflow:hidden;
		}
		#conteneur div {
			float:left;
			width:100px;
			background:#fafafa;
		}
		.impair {
			clear: left;
			background:#afafaf;
		}
		</style>
	</head>
	<body>
	<div id="conteneur"> 
	  <div class="impair">Lorem ipsum dolor</div> 
	  <div>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div> 
	  <div class="impair">Lorem ipsum dolor</div> 
	  <div>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div> 
	  <div class="impair">Lorem ipsum dolor</div> 
	  <div>Lorem ipsum dolor</div> 
	  <!-- etc. --> 
	</div>
	</body>
</html>


En fait, le tri se fait correctement, mais les deux colonnes restent "dépendantes" : les blocs sont alignés par pairs - ce que je souhaite c'est que dans une colonnes les blocs s'empilent les uns au dessous des autres, indépendamment de la taille des blocs dans la colonne d'à côté.
Sujet clos
Aller à