J'essaie de créer un graphique à barres horizontales empilées à 100% en utilisant HTML et CSS. Je voudrais créer les barres en utilisant DIVs
des couleurs d'arrière-plan et des largeurs de pourcentage en fonction des valeurs que je veux tracer. Je veux également avoir une grille pour marquer une position arbitraire le long du graphique.
Dans mon expérimentation, j'ai déjà fait empiler les barres horizontalement en attribuant la propriété CSS float: left
. Cependant, j'aimerais éviter cela, car cela semble vraiment déranger la mise en page de manière déroutante. De plus, les lignes de la grille ne semblent pas très bien fonctionner lorsque les barres flottent.
Je pense que le positionnement CSS devrait être capable de gérer cela, mais je ne sais pas encore comment le faire. Je souhaite pouvoir spécifier la position de plusieurs éléments par rapport au coin supérieur gauche de leur conteneur. Je rencontre régulièrement ce genre de problème (même en dehors de ce projet de graphique particulier), donc j'aimerais une méthode qui soit:
- Cross-browser (idéalement sans trop de hacks de navigateur)
- Fonctionne en mode Quirks
- Aussi clair / propre que possible, pour faciliter les personnalisations
- Fait sans JavaScript si possible.