Выровнять по вертикали с неполноценными дочерними элементами div - PullRequest
Новая
       0

Выровнять по вертикали с неполноценными дочерними элементами div

0 голосов
/ 05 января 2011

Я делаю веб-сайт, и у меня есть этот HTML-код для гистограммы: 

<div class="chart">
  <meter style="height: 160px;">80%</meter>
  <meter style="height: 86px;">43%</meter>
  <meter style="height: 128px;">64%</meter>
  <meter style="height: 172px;">86%</meter>
  <meter style="height: 70px;">35%</meter>
  <meter style="height: 52px;">26%</meter>
</div>

Чтобы превратить это в хорошую гистограмму, я использую этот CSS: 

div.chart {
  background-color: #343434;
  height: 200px;
  padding: 10px;
}

div.chart meter {
  display: inline-block;
  background-color: #892399;
  border-top: solid 1px #AB34CB;
  color: #FFFFFF;
  outline: solid 1px #670034;
  text-align: center;
  width: 60px;
  vertical-align: text-bottom;
}

Поскольку ни один из столбцов на графике не равен 100% и, следовательно, 200px, между нижней частью контейнера графика и столбцами есть разрыв: alt text

Единственный способ исправить это, я мог подуматьэто либо с помощью JavaScript, либо путем вставки некоторого ужасного div после полос, которые имеют ширину 1px и visibility: hidden;, но это портит мой HTML.

Как я могу исправить это по-другомусохранить мой HTML как есть?

Кстати, это веб-приложение не будет использоваться никакими пользователями IE, поэтому меня не волнует этот древний фрагмент% & @ #:)

Ответы [ 2 ]

2 голосов
/ 05 января 2011

Добавить 

div.chart {
  display:table-cell;
  vertical-align:bottom;
  }

Смотрите живой пример: http://jsfiddle.net/Flack/sB2zU/

1 голос
/ 05 января 2011

Если div.chart всегда должно быть 200px, тогда установите внутри него еще один div без заданной высоты и поместите <meter> s внутри него.Установите для этого нового внутреннего div значение position:absolute;bottom:0; Установите цвет фона для external div, а не внутреннего.

Like: 

#outer { position: relative;
    background: purple;
    height: 200px; }
.chart { position: absolute;
    bottom: 0; 
    background: transparent; /* not necessary, just to show you. */
    }


<div id="outer">
<div class="chart">
  <meter style="height: 160px;">80%</meter>
  <meter style="height: 86px;">43%</meter>
  <meter style="height: 128px;">64%</meter>
  <meter style="height: 172px;">86%</meter>
  <meter style="height: 70px;">35%</meter>
  <meter style="height: 52px;">26%</meter>
</div>
</div>
...