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/
