Question

这是一个html条形图。如何使图表中的竖条从下到上显示，而不是现在出现的方式。

这是html

<div class="chart">
    <div style="height: 40px; width: 5px; float: left; padding-bottom: 0px">
        4</div>
    <div style="height: 80px; width: 5px; float: left;">
        8</div>
    <div style="height: 150px; float: left;">
        15</div>
    <div style="height: 160px; float: left;">
        16</div>
    <div style="height: 230px; width: 13px; float: left;">
        23</div>
    <div style="height: 420px; float: left;">
        42</div>
</div>

这是csss

 .chart div
    {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }

以下是jsfiddle

的链接

Answer 1

您可以使用display: inline-block代替浮动，这样您就可以使用vertical-align: bottom。

像这样：

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
  display: inline-block;
  vertical-align: bottom;
}

Fiddle

从底部到顶部对齐div

1 个答案: