Bonsoir ,
je ne suis pas tout a fait persuader que inline-block corresponde au cahier des charges , vu le retour a ligne , que l'on peut obtenir sans toucher au html .
Il me semble qu'un balisage : titre + texte (en paragraphe ou au kilometre ) est pertinent et utile .(un hn + un p au minimum)
Un conteneur div (ou section) pour contenir ça ensemble et on a une base stylable .
Le flottement est aisé , les effets de bords contenu par le contexte de formatage ne semble pas une contre-indication (cependant , les bugs historique de IE perdurent : 3pixels jug & double-margin) .
Avec inline-block ou float , le resultat visuel sera trés similaire , induit une surcharge html (<br>) et oblige a un css specifique pour certaines version de IE , voir firefox.
Si l'on repart avec un simple display:inline; (et un display:table; accessoire) on peut repartir sur un truc degradé pour IE 7 et moins .
On ne surligne alors que le texte , mais on perd sur les bordures verticales .
Un nouvelle exemple pour exprimée l'idée (plus on en met , plus il faut compenser ou restyler les valeurs par defaut de styles) :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
body , html {width:100%;margin:0;padding:0;}
div {
overflow:hidden;
zoom:1;/* pour IE < 7 */
padding-bottom:1px;/* compense marge negative */
width:47%;
padding:10px 0;
margin:10px;
background:#eee;
}
.float {
float:left;
display:inline;
margin:auto 10px 10px ;
}
h1 , p {
font-size:1em;
float:left;
clear:left;
border:1px solid #4F8A10;
margin:0 10px -1px;
padding:1px 0.5em ;
background:#DFF2BF;
}
.inline {
display:block;
width:auto;
clear:both;
}
.inline h1 {
float:none;
display:table;}
.inline p {
float:none;
display:inline;
margin:auto;
line-height:1.25em;
padding:0;
}</style>
</head>
<body>
<div>
<p>plop</p>
</div>
<div class="float">
<h1>Notes : </h1>
<p>Les < div> sont des éléments de type blocks qui ont comme comportement par défaut d'occuper toute la largeur qui leur est disponible, sur la hauteur qui leur est nécessaire.</p>
<p> Pour faire ce que tu recherche il faut que tu utilise un élément de type en ligne ou que tu passe tes div en ligne.</p>
<p>Le flottement de ces element dans une zone ou tu maitrise le contexte de formatage , peut aussi faire l'affaire</p>
</div>
<div>
<h1>Notes : </h1>
<p>Le flottement de ces element dans une zone ou tu maitrise le contexte de formatage , peut aussi faire l'affaire</p>
</div>
<p>Le flottement de ces element dans une zone ou tu maitrise le contexte de formatage , peut aussi faire l'affaire</p>
<div class="inline">
<h1>Notes : texte au kilometre </h1>
<p>Les < div> sont des éléments de type blocks qui ont comme comportement par défaut d'occuper toute la largeur qui leur est disponible, sur la hauteur qui leur est nécessaire.
Pour faire ce que tu recherche il faut que tu utilise un élément de type en ligne ou que tu passe tes div en ligne.
Le flottement de ces element dans une zone ou tu maitrise le contexte de formatage , peut aussi faire l'affaire</p>
</div>
</body>
</html>
cette exemple met 3 div en cause .
un premier en float ,
un second dans le flux (qui contient les style clear sur ses enfants)
un paragraphe
un troisieme div avec le display:inline; pour le texte.
GC
