28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement de div.

Bonjour,
Voila le code sur lequel j ai une question:


<!DOCTYPE html>
<html>     
  <head>
    <style type="text/css">
    *{margin:0px;padding:0px;}
    .box{display:inline-block;border:1px green solid;padding:1%;}
    .childBox{display:inline-block;margin:1%;padding:1%;border:1px red solid;} 
    </style>          
  </head>        
  <body>               
    <div class="box">
    <p>venerint ultima</p>          
    </div>         
    <div class="box">             
      <div class="childBox"> <p>Acies rupium</p>              
      </div>             
      <div class="childBox"> <p>Acies rupium</p>            
      </div>             
      <div class="childBox"> <p>Acies rupium</p>           
      </div>             
      <div class="childBox"> <p>Acies rupium</p>          
      </div>             
      <div class="childBox"> <p>Acies rupium</p>              
      </div>             
      <div class="childBox"> <p>Acies rupium</p>              
      </div>             
      <div class="childBox"> <p>Acies rupium</p>              
      </div>         
    </div>     
  </body>
</html>


Et une petite image pour etre plus clair:
upload/48897-bug-div.jpg

Donc si on utilise se code toutes les div, avec la class childBox, ne sont pas sur la même ligne(boite rouge dans cas 1, cf l image ).

Alors que si je remplace 
margin:1%;padding:1%;
par 
margin:10px;padding:10px
; ou 
margin:1em;padding:1em;
, les div réagissent comme je l'attends. (cf, le cas2 de l image)

Savez vous comment faire pour que je conserve mon code avec des %?????
Car la je trouve que ça réagit bizarrement?

Merci de vos réponses.

Mooglooch
Salut,

En fait l'unité CSS "pourcent" (%) est assez trompeuse. Elle est basée sur son élément parent, du coup, pour toi, tu dis que toutes tes balises 
<div class="childBox">
représentent 1% de leur parent :
<div class="box">

Je te conseillerais plutôt d'utiliser un autre système de mesure (px, em...) surtout pour les margin et padding.
Sujet clos
Aller à