28172 sujets

CSS et mise en forme, CSS3

Mise en forme sur 2 colonnes

Bonjour,

Je souhaite disposer sur deux colonnes des boîtes ayant la même largeur.

Pour cela je crée un conteneur suffisamment large pour contenir deux boîtes côte à côte, chaque boite ayant la propriété "float" marquée à "left" de manière à ce que toutes les boîtes s'agglutinent les unes aux autres de gauche à droite et de haut en bas.

L'écoulement des boîtes en deux colonnes se fait mais en générant parfois des trous dans la colonne gauche :

http://img20.imageshack.us/img20/9151/snap1ho.jpg

Or je voudrais arriver à ce résultat :

http://img20.imageshack.us/img20/459/snap2x.jpg

Y a-t-il une solution simple pour y parvenir sachant que j'ai deux contraintes :

1 - Les boîtes ont la même largeur mais pas la même hauteur.
2 - Les boîtes sont ajoutées dynamiquement au code html, juste avant l'envoi de celui-ci au navigateur, ce qui signifie que je ne peux pas bidouiller le bout de code html où se trouvent les boîtes puisqu'il n'existe pas lorsque je développe.

Codes CSS et HTML :


body {
  margin: 0;
  padding: 0;
  background-color: gray;
}

.conteneur {
  width: 400px;
  height: 500px;
  margin: 5px 50px;
  padding-left: 5px;
  background-color: orangered;
}

.bloc {
  width: 195px;
  margin-top: 5px;
  margin-right: 5px;
  float: left;
  background: mistyrose;
}

#bloc1 {
  height: 200px;
}

#bloc2 {
  height: 300px;
}

#bloc3 {
  height: 150px;
}




<body>
  <div class='conteneur'>

    <!- DEBUT PARTIE AJOUTEE DYNAMIQUEMENT -->

    <div class='bloc' id='bloc1'>1</div>
    <div class='bloc' id='bloc2'>2</div>
    <div class='bloc' id='bloc3'>3</div>

    <!- FIN   PARTIE AJOUTEE DYNAMIQUEMENT -->

  </div>
</body>
Hello Dopseu et bienvenue,

non il n'y a pas de solution simple.

Tu pourrais, au lieu de faire flotter les blocs, utiliser 2 éléments DIV pour chaque colonne et, dynamiquement, alimenter d'abord celle de gauche puis ensuite celle de droite :
body { 
  margin: 0; 
  padding: 0; 
  background-color: gray; 
} 
 
.conteneur { 
  width: 400px;
  overflow: hidden;
  margin: 5px 50px; 
  padding: 0 0 5px 5px; 
  background-color: orangered; 
} 
 
.bloc { 
  width: 195px; 
  margin-top: 5px; 
  margin-right: 5px; 
  background: mistyrose; 
} 

#gauche, #droite {
	float: left;
	width: 200px;
}
 
#bloc1, #bloc5 { 
  height: 200px; 
} 
 
#bloc2, #bloc4 { 
  height: 300px; 
} 
 
#bloc3, #bloc6, #bloc7 { 
  height: 150px; 
} 
  <div class='conteneur'> 
 
    <!- DEBUT PARTIE AJOUTEE DYNAMIQUEMENT --> 
 	<div id="gauche">
		<div class='bloc' id='bloc1'>1</div> 
		<div class='bloc' id='bloc3'>3</div> 
		<div class='bloc' id='bloc5'>5</div> 
		<div class='bloc' id='bloc7'>7</div> 
	</div>
 	<div id="droite">
		<div class='bloc' id='bloc2'>2</div> 
		<div class='bloc' id='bloc4'>4</div> 
		<div class='bloc' id='bloc6'>6</div> 
	</div>
 
    <!- FIN   PARTIE AJOUTEE DYNAMIQUEMENT --> 
 
  </div>
Ce qui peut notamment poser un problème d'ordre dans le flux...
Merci Heyoan pour ta réponse.

Sur un forum anglophone j'ai trouvé un type qui était confronté au même problème que le mien. Il s'est débrouillé avec une fonction bascule en javascript qui regarde si il y a un trou et si c'est le cas son script modifie dynamiquement la propriété "float". Mais il n'a pas partagé le code. Moi je débute en CSS et je n'y connais rien en javascript. Voilà voilà...

Donc, il me reste deux possibilités :

1 - Bidouiller le "système" qui génère le code HTML (solution rapide mais codée en "dur")
2 - Javascript (solution hardcore mais dynamique)

Re-merci pour ta réponse, je vois mieux où j'en suis et ce qu'il me reste à faire.
Modifié par Dopseu (26 Feb 2010 - 20:02)
Bonjour à tous !

J'ai exactement la même requête...

@Heyoan -- en fait, ta solution marcherait, mais avec l'impossibilité de contrôler l'ordre d'affichage : dans mon cas, il faut que les blocs s'affichent dans l'ordre fourni.

Par exemple, imaginons que j'ai 5 blocs : le premier est haut de 250px tandis que les autres sont hauts de 100px. Ce que je voudrais, c'est que le bloc 1 soit dans la colonne de gauche (face aux blocs 2, 3 et la moitié du bloc 4), et que le bloc 5 soit dans la colonne de gauche immédiatement après le bloc 1 (et non aligné avec le bas du bloc 4, soient 50px sous le bloc 1) ==> voir mon image pour que ce soit un peu plus claire (enfin, j'espère Smiley ohwell )

Rappel : on ne connaît pas à l'avance la hauteur des blocs...

Quelqu'un connaît-il une solution purement CSS, ou alors faut-il jouer avec JS ?

Merci d'avance pour vos réponses... upload/27948-blocs.jpg
Modifié par Jpm (15 Mar 2010 - 13:25)
Sujet clos
Aller à