Bonjour,
Vous trouverez ci-dessous le code illustrant le problème que je rencontre.
Je l'ai réduit au minimum pour ne conserver que le problème en question.
Au niveau du 2éme paragraphe, j'affiche des termes sur 3 colonnes pour les grands écrans, sur 2 colonnes pour les écrans de taille moyennes et sur une seule colonne pour les petits écrans.
Afin de ne pas faire un tableau, j'ai mis chaque terme dans un span et je joue avec width en css pour que cela s'adapte (100%, 50%, 33%).
Mon problème est que le paragraphe qui contiens mes spans ne s'adapte pas en hauteur en fonction de son contenu. Du coup je n'ai pas le margin-bottom de 30px pour ce paragraphe.
Le h2 qui le suit est donc trop près du paragraphe.
Quelle style css je dois ajouter à ce paragraphe pour que sa hauteur d'adapte bien à son contenu ?
Procéderiez-vous différemment pour faire cela ?
En espérant être compréhensible.
Merci d'avance.
Modifié par yann123 (20 Jan 2015 - 18:35)
Vous trouverez ci-dessous le code illustrant le problème que je rencontre.
Je l'ai réduit au minimum pour ne conserver que le problème en question.
Au niveau du 2éme paragraphe, j'affiche des termes sur 3 colonnes pour les grands écrans, sur 2 colonnes pour les écrans de taille moyennes et sur une seule colonne pour les petits écrans.
Afin de ne pas faire un tableau, j'ai mis chaque terme dans un span et je joue avec width en css pour que cela s'adapte (100%, 50%, 33%).
Mon problème est que le paragraphe qui contiens mes spans ne s'adapte pas en hauteur en fonction de son contenu. Du coup je n'ai pas le margin-bottom de 30px pour ce paragraphe.
Le h2 qui le suit est donc trop près du paragraphe.
Quelle style css je dois ajouter à ce paragraphe pour que sa hauteur d'adapte bien à son contenu ?
Procéderiez-vous différemment pour faire cela ?
En espérant être compréhensible.
Merci d'avance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
<style type="text/css">
p{margin-bottom: 30px;}
span{width:100%; float:left;}
.clear{clear:both;}
@media only screen and (min-width: 30em) {
span{width:50%;}
}
@media only screen and (min-width: 60em) {
span{width:33%;}
}
</style>
</head>
<body>
<h2>fame monitae plerumque ad eum locum</h2>
<p>Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</p>
<h2>fame monitae plerumque ad eum locum</h2>
<p>
<span>Tullius</span>
<span>monitae</span>
<span>aliquando</span>
<span>monitae plerumque</span>
<span>turbinis</span>
<span>Atque</span>
<span>instar turbinis</span>
<span>turbinis</span>
<span>sunt revertuntur</span>
</p>
<h2 class="clear">fame monitae plerumque ad eum locum</h2>
<p>Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</p>
</body>
</html>
Modifié par yann123 (20 Jan 2015 - 18:35)
