Positionnement div collé quelque sois la hauteur et en colonne..

Fermé
dzavatar Messages postés 18 Date d'inscription dimanche 22 décembre 2013 Statut Membre Dernière intervention 6 novembre 2019 - 19 août 2015 à 17:24
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 - 20 août 2015 à 17:33
Bonjour à tous , voici mon soucis...
j'essaie de créer une mise en page d'aperçu d'article dans de petite div. Avec un titre , une image dessous.. Jusque la pas de soucis. Mon problème est que si le titre passe en 2 ligne la div s'allonge vers le bas et du coup toute les suivante garde un espace équivalent à la plus grande la précédent sur la ligne supérieur. Y a t'il une façon pour que cela ne se passe pas ainsi sur celle se trouvant à sa gauche ou à sa droite ?
En image , c'est plus parlant....



voici le code des div :


<div class="article">
<p class="articletitreart">le titre à afficher</p>
<p><img src="Mon_image.jpg"/></p>
</div>




Le css qui correspond :
.article{
width: 290px;
margin: 0;
padding: 0;
display: inline-table;
background-color: rgba(0, 0, 0, 1);
text-overflow: ellipsis;
border-top: 4px solid #6d0019;
border-radius: 10px;


}


margin,padding et display son les derniers ajout que j'ai testé mais rien n'y fait...


En vous remerciant d'avance pour votre aide :)

5 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
19 août 2015 à 17:38
Salut,

Tu peux par exemple regrouper 3 div .articles dans un autre div qui fera office de ligne en lui appliquant la propriété display: table; et en appliquant display: table-cell; sur les div .articles :

<div class="ligne">
  <div class="article">
    <p class="articletitreart">le titre à afficher</p>
    <p><img src="Mon_image.jpg"/></p>
  </div>
  <div class="article">
    <p class="articletitreart">le titre à afficher<br>sur 2 ligne</p>
    <p><img src="Mon_image.jpg"/></p>
  </div>
  <div class="article">
    <p class="articletitreart">le titre à afficher</p>
    <p><img src="Mon_image.jpg"/></p>
  </div>
</div>


.ligne {
    display: table;
}

.article {
    width: 290px;
	margin: 0;
	padding: 0;
	display: table-cell;
	background-color: rgba(0, 0, 0, 1); 
	text-overflow: ellipsis;
	border-top: 4px solid #6d0019;
	border-radius: 10px;
}


Bonne journée
0
dzavatar Messages postés 18 Date d'inscription dimanche 22 décembre 2013 Statut Membre Dernière intervention 6 novembre 2019
19 août 2015 à 18:02
En faite je ne connais pas vraiment le nombre de Div à l'avance , cela sort d'une requête sql ... le tout est déjà dans un conteneur
j'ai donc ajouté pour tester a celui-ci display: table;

et a .article voila les réactions :

table ou table-cell ou table-caption : div a la vertical a gauche;
table-collum : aucun div visible
table-row : verticale + largeur selon le texte ...

:/
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
20 août 2015 à 09:30
Tu peux regrouper les résultats de ta requête sql en utilisant l'opération modulo pour compter les multiples de 3 articles.
Par exemple :
// ouverture d'une ligne
echo '<div class="ligne">';

$i = 1;
while ($donnees = $result->fetch()) {}
    // affichage article
	echo '<div class="article">...</div>';

	// fermeture et ouverture d'une ligne sur un multiple de 3 articles
        if($i % 3 == 0) { 
		echo '</div><div class="ligne">';
	}
	
	$i++;
}

// fermerture de la dernière ligne
echo '</div>';
0
dzavatar Messages postés 18 Date d'inscription dimanche 22 décembre 2013 Statut Membre Dernière intervention 6 novembre 2019
20 août 2015 à 15:35
merci pour ta réponse , mais apparemment le soucis reste le même , effectivement j'ai bien des lignes de 3div qui se forme , mais si l'une est plus haute, la ligne inférieur est poussé... je pensais vraiment qu'il y avait par css un moyen de forcer se style de mise en page... si pas , je vais peu être finir par définir une hauteur fixe au div en pensant a la plus grande que je pourrais avoir .. :/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
20 août 2015 à 15:51
Il est possible que tu es des conflits à cause d'autres règles dans ton css, mais ce principe fonctionne bien : http://jsfiddle.net/365pjmn3/
0
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
20 août 2015 à 15:56
bonjour,

le problème ne vient pas du php mais de son css apparemment.
personnellement je passerais la classe articletitreart en position relative.
Normalement le décalage disparaitra mais plus le titre sera long moins on verra d'image.

Cordialement,
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
20 août 2015 à 16:06
Le fait de passer la classe .articletitreart en position relative ne permet pas d'avoir la même hauteur pour les div .article. Je ne comprend pas ta proposition.
0
jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
Modifié par jambondardennes le 20/08/2015 à 17:55
parce que son problème vient du titre trop long si je m'en réfère à l'image.
Si tu passes en relative le titre ne viendra plus étendre la div article comme actuellement.

(je viens d'essayer sur fiddle vite fait et marche pas donc j'ai rien dit :)p
0