Как я могу расположить столбцы гистограммы вертикально, чтобы они все сидели на дне контейнера?

Question

Как я могу расположить столбцы гистограммы вертикально, чтобы они все сидели на дне контейнера?

0

Я создал динамически созданный график. Каждый батон гистограммы имеет разную высоту. Я хочу вертикально выровнять их, чтобы все они сидели у основания контейнера div.

В настоящее время это выглядит так: базовый уровень, по-видимому, является вершиной каждого бара, и он растет вниз. Я, что он растет вверх, как стандартная гистограмма.

HTML:

<div class="chartWrapper">
  <div class="bar" style="height:is-dynamically-generated;"></div>
  <div class="bar" style="height:is-dynamically-generated;"></div>
  <div class="bar" style="height:is-dynamically-generated;"></div>
  etc...
</div>

CSS:

.bar{
    width:5px;
    border: 1px solid #000;
    background-color:grey;
    float:left;
    margin-left:10px;
}
.chartWrapper{
    width:600px;
    height:600px;
    border: 1px solid #000;
}

Итак, как я могу вертикально выровнять все столбцы, чтобы они сидели/начинались в нижней части родительского div?

crm 14 дек. 2013, в 08:52

Источник

Теги:

html

css

vertical-alignment

height

2 ответа

Ещё вопросы

CRABOLO · Answer 1 · 2013-12-14T05-11-00.000Z

.chartWrapper {
    transform: rotate(180deg);
}

Gaddafi Rusli · Answer 2 · 2013-12-14T04-45-00.000Z

Я думаю, вы можете попробовать следующий метод.

[ОБНОВЛЕНО]

U должен иметь барную упаковку для каждого из баров. И установите обертки для планшета на ту же высоту, что и главная обертка. Затем установите для него относительное позиционирование.

.barwrapper{
    height: 500px;
    float: left;
    width: 20px;
    position:relative;
    margin-left: 10px;
}

Установите стойки на абсолютное положение, а затем установите их всегда в нижней части обертки.

.bar{
    width: 20px;
    position: absolute;
    bottom: 0;
    ...
}

Вот небольшая демонстрация, которую я создал для этого ответа. http://jsfiddle.net/6M638/