28172 sujets

CSS et mise en forme, CSS3

Div de hauteurs différentes réparties sur deux colonnes

Hello
Bon mon titre est moyen, mais c'est pas évident de m'expliquer en deux mots...
Voici donc une image :
upload/58709-problemecs.gif

Dans un conteneur (fond blanc de l'image) je souhaite placer une quantité de blocks qui font (margin et padding compris) exactement la moitié du conteneur en largeur.
Le but est qu'ils se répartissent "naturellement" sur deux colonnes.

Voici le code CSS de mes blocks oranges :

#wrapper{
	margin-left:48px;
	width:928px;
	padding-bottom:30px;
	background-color: white;
	float:left;
}

.block_orange{
	width:449px;
	float:left;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
}


et le code html

<div id="wrapper">
<div class="block_orange">
contenu texte
</div>
</div>

Les blocks n'ont pas tous la même hauteur (en fonction du texte qu'ils contiennent).
Mon problème c'est que le block n°3 s'aligne verticalement sur le block n°2.
Je souhaiterais qu'il s'aligne sur le bloc n°1 et comble ainsi l'espace laissé vide entre-eux...

Je pense que c'est un problème basique, mais comme j'ai beaucoup de mal à le définir autrement qu'en image je ne trouve pas le sujet sur le web (et chez vous)

Merci beaucoup
Pourquoi ne créés tu pas une div qui contient tes block oranges:


<div id="wrapper">
  <div class="cont_block">
    <div class="block_orange">
    contenu texte
    </div>
  </div>
</div>




#wrapper{
	margin-left:48px;
	width:928px;
	padding-bottom:30px;
	background-color: white;
	float:left;
}

.cont_block{
    width:449px;
    margin-left:10px;
}

.block_orange{
	float:left;
	margin-top:10px;
	margin-bottom:10px;
}



L'idée est que tes blocks oranges de gauche soit dans un conteneur different de tes block de droite
Hello
Merci pour ta réponse Smiley smile
En fait je n'y ai pas pensé car les blocks oranges sont créés dynamiquement en PHP / MySQL.
Leur ordre est important et doit rester le même.
je génère le code 

<div class="block_orange">
    contenu texte 01
</div>
<div class="block_orange">
    contenu texte 02
</div>
<div class="block_orange">
    contenu texte 03
</div>

etc...
Du coup c'est compliqué de mettre le block01 et le block03 dans une div, et le block02 et block04 dans une autre.
Je préfèrerai trouver une solution CSS.

Si je ne trouve pas je ferais un tri en php pour mettre les blocks paires dans une div verticale et les impaires dans une autre à côté, comme tu m'as suggéré.
J'ai trouver une solution à ton probleme:

Les éléments de gauche doivent être en float:left et ceux de droite en float:right.
tu peux regarder le test ici

Ça t'oblige quand même à faire un tri pour tes éléments pairs et impair, ou à récupérer les données par 2, la 1ère en float left et la deuxieme en float right (je sais pas si je suis très clair.)

desolé pour les fautes je suis un peu pressé
Je m'explique un peu mieux:


$i=1;
while ($data= mysqli_fetch_array($result)){

	$pair_impair = $i % 2; // pair ou impair, si reste = 1 -> impair

	if($pair_impair==0){ // pair
		echo '
		<div style="float:left;">
		Contenu ou div block avec contenu de ta variable $data[]
		</div>';
	}
	if($pair_impair==1){ // impair
		echo '
		<div style="float:right;">
		Contenu ou div block avec contenu de ta variable $data[]
		</div>';
	}
	$i = i++;
}


$result est le résultat de ta requête sql, comme ça, une seule requête et un code php tout simple pour implémenté tes div de la bonne valeur left ou right.

L'avantage, c'est que si tes div passent en largeur 100% (responsive design), elles restent dans le bon ordre (1, 2, 3, ...). En effet, si tu créé 2 colonnes avec pour chacune les numéro pair et impair, en responsive tu aura en affichage 100%: 1, 3, 5 suivi de 2, 4, 6 etc, etc .....

Pour moi c'est la meilleur solution.
Modifié par kayoo (09 May 2015 - 23:53)
Hello Kayoo

Merci beaucoup pour le coup de main !
J'ai repris ton idée comme ça : 

$i=0;
while ($row=$resultat->fetch()){

$pair_impair = $i % 2; // pair ou impair, si reste = 1 -> impair

	if($pair_impair==0){ // pair
		echo '
		<div style="float:left;">
		Contenu ou div block avec contenu de ta variable $data[]
		</div>';
++$i;
	}
	if($pair_impair==1){ // impair
		echo '
		<div style="float:right;">
		Contenu ou div block avec contenu de ta variable $data[]
		</div>';
++$i;
	}

}

C'est cool d'avoir eu un peu d'aide j'ai bien avancé ! Smiley biggrin
Sujet clos
Aller à