Я пытаюсь создать горизонтальную 100% -ную гистограмму, используя HTML и CSS. Я хотел бы создать бары с использованием DIVs
цветов фона и ширины в процентах в зависимости от значений, которые я хочу построить на графике. Я также хочу иметь линии сетки для обозначения произвольной позиции на графике.
В своих экспериментах я уже получил горизонтальное расположение столбцов, назначив свойство CSS float: left
. Тем не менее, я бы хотел этого избежать, так как он действительно запутывает макет. Кроме того, линии сетки, кажется, не очень хорошо работают, когда бары плавают.
Я думаю, что CSS-позиционирование должно справиться с этим, но я пока не знаю, как это сделать. Я хочу иметь возможность указать положение нескольких элементов относительно верхнего левого угла их контейнера. Я регулярно сталкиваюсь с такого рода проблемами (даже вне этого конкретного графического проекта), поэтому мне нужен метод, который:
- Кросс-браузер (в идеале, без слишком большого количества взломов браузера)
- Работает в режиме Quirks
- Как можно более ясно / чисто, чтобы облегчить настройку
- Сделано без JavaScript, если это возможно.