Positionnement div collé quelque sois la hauteur et en colonne..
dzavatar
Messages postés
19
Statut
Membre
-
jambondardennes Messages postés 492 Statut Membre -
jambondardennes Messages postés 492 Statut Membre -
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 :
Le css qui correspond :
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 :)
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 :)
A voir également:
- Positionnement div collé quelque sois la hauteur et en colonne..
- Déplacer colonne excel - Guide
- Trier colonne excel - Guide
- Colonne word - Guide
- Formule somme excel colonne - Guide
- Figer colonne excel - Guide
5 réponses
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 :
Bonne journée
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
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 ...
:/
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 ...
:/
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 :
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>';
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 .. :/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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/
