[CSS] Propriété display inline et inline-block - HTML / CSS  

Forum > HTML / CSS > [CSS] Propriété display inline et inline-block

[CSS] Propriété display inline et inline-block

avatar de stc
Membre
# Le 09/09/2011 à 05h06
Salut, pour un de mes sites j'ai essayé de remplacer mes float left en transformant mes block de div en inline car j'avais 2 colonnes (1 float left) et dans la colonne de droite encore un block de 2 colonnes, donc impossible d'utiliser le float (au moment ou je fais un clear le 1° float ne fonctionne plus ).J'ai essayé de remplacer par un :
  1. div.contenu div.colonneGauche {
  2. display: inline-block;
  3. width: 25%;
  4. font-weight: 700;
  5. margin-right: 10px;
  6. vertical-align: top;
  7. }

Cela fonctionne mais le plus surprenant c'est que si je met "inline" a la place de "inline-block" la ça ne réagis pas du tout comme on pourrait s'y attendre, en fait le block reste un block.
J'ai trouvé la solution mais je me demande quand même pourquoi la propriété display: inline; ne fonctionne pas, je me demande aussi si "inline-block" est bien supportée (j'ai essayé sur firefox et internet explorer ça marche mais c'est pas des vieilles versions).
Merci pour vos réponses
Membre
# Le 17/01/2014 à 19h57
salut,

le différence est dans la taille de block, on imagine qu'on met une <span> dans une <div>, si on donne a cette <span> une height de 120px ou 100px il va apparaitre normalement avec display: inline
Mais si on utilise display: inline-block ça va prendre en hauteur, regarde cet exemple :

http://jsfiddle.net/templates4all/a6JWA/1/
avatar de stc
Membre
# Le 20/12/2015 à 01h54
ça spam sec on dirait, faudrait mettre un bouton 'Signaler un abus'