Coller div verticalement

Fermé
Poum - 9 avril 2014 à 09:15
 Robotobor - 9 avril 2014 à 12:06
Bonjour,


J'ai besoin de réaliser une "grille" dont chaque case est un div et dont la hauteur des cases est de 1px. La grille doit faire 7 cases de large. J'ai donc créé un div conteneur qui fait 7 fois la largeur des cases, tout se passe bien horizontalement mais verticalement, un grand espace sépare les div. L'espace disparaît pour une hauteur de case d'environ 14px.

voici le CSS :

#tr-inf{display:inline-block;width:750px;height:1500px;border:1px solid red;float:left;font-size: 0;}
#tr-inf .td{display:inline-block;width:100px;height:1px;border:1px solid green;padding:0px;font-size: 15px;}

Avez-vous une solution ?
Je vous remercie

1 réponse

Salut,


je ne sait pas, à 1px de taille autant utiliser une image.
Sinon à quoi sert le float, vu que vous mettez en inline-block(ce qui sert donc à adopter un comportement en ligne) il devrait pas être nécessaire.

J'ai fait ça mais pas pour des div de 1px, essayer de voir si vous pouvez adapter.
Encore une fois pourquoi pas une image? Avec jquery+canvas vous pouvez dessiner pixel par pixel.

<!DOCTYPE html>
<meta charset="utf-8">
<html lang='fr'>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css' rel='stylesheet' >
body{
text-align:center;
margin:0;
padding:0;
line-height:0;<!-- peut être avec ceci pour enlever décalage-->
}
.cased{
margin:0;
padding:0;
display:inline-block;
width:98px;
height:98px;
border:1px solid #ffc000;<!--contour pour voir les cases-->

}
</style>

</head>
<body>
<div style='display:inline-block;width:600px;height:600px;'>
<!-- pour éviter le probléme de décalage de whitespace tout doit être sur la même ligne-->
<div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div><div class='cased'></div>
</div>
</body>
0