Bonjour à tous et à toutes,

Je voudrais aligner trois div qui n'ont pas forcément la même hauteur sur le haut de mon conteneur mais je n'y arrive pas.

Es-ce que quelqu'un peu m'aider ?

Voici mes codes

CSS

#contener_pronostics {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
    align-items: center;
	flex-wrap: wrap;
	
}
.boite_pronostics {
	align-content:stretch;
	justify-content:flex-start;
	flex:1;
	flex-wrap: wrap;
	min-width:310px;
	background: rgba(31,159,204,.5);
	border: 1px solid #333;
	border-top-color: #1f9fcc;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	-webkit-box-shadow: 0px 2px 5px #333333; 
	-moz-box-shadow: 0px 2px 5px #333333; 
	box-shadow: 0px 2px 5px #333333;
	margin:1%;
	padding:0 1% 1% 1%;
}

HTML

<?php
echo'<div id="contener_pronostics">';
	echo'<div class="boite_pronostics">
		<p class="fond_Orange_fonce"><img src="'.ROOTPATH.'/images/news/ballon-football.png" alt="pronostic football"/> Football</p>';
		echo'<div class="element_1">PARIS VS MARSEILLE 02/02/1998 Paris gagnant</div>
		<div class="element_2">COTE TOTAL : 2.00</div>';
		echo'<div class="element_3">FIABILITE : 90%</div><hr/>';
		echo'<div class="element_1">PARIS VS MARSEILLE 02/02/1998 Paris gagnant</div>
		<div class="element_2">COTE TOTAL : 2.00</div>';
		echo'<div class="element_3">FIABILITE : 90%</div><hr/>';
		echo'<div class="element_1">PARIS VS MARSEILLE 02/02/1998 Paris gagnant</div>
		<div class="element_2">COTE TOTAL : 2.00</div>';
		echo'<div class="element_3">FIABILITE : 90%</div>
	</div>';

	echo'<div class="boite_pronostics">
		<p class="fond_Orange_fonce"><img src="'.ROOTPATH.'/images/news/balle-tennis.png" alt="pronostic tennis"/> Tennis</p>
		<div class="element_1">PARIS VS MARSEILLE 02/02/1998 Paris gagnant</div>
		<div class="element_2">COTE TOTAL : 2.00</div>
		<div class="element_3">FIABILITE : 90%</div>
	</div>';

	echo'<div class="boite_pronostics">
		<p class="fond_Orange_fonce"><img src="'.ROOTPATH.'/images/news/ballon-basket.png" alt="pronostic basket"/> Basket</p>
		<div class="element_1">PARIS VS MARSEILLE 02/02/1998 Paris gagnant</div>
		<div class="element_2">COTE TOTAL : 2.00</div>
		<div class="element_3">FIABILITE : 90%</div>
	</div>';
echo'</div>';
?>

Pour l'instant le premier div et en haut à gauche et les deux suivant sont sur sa droite (ça c'est bon) mais ils se centre au milieu du premier dans la verticale car le premier est plus haut et je voudrais qu'ils soit en haut.

Es-ce possible ?

Merci d'avance.

-
Edité par sergio_zero 14 janvier 2019 à 11:02:22

align-self: baseline;

-
Edité par M4jestic 14 janvier 2019 à 11:40:04

Bonsoir M4jestic,

désolé de ma réponse tardive mais j'étais au boulot.

Merci beaucoup, ça fonctionne.