CSS“高度”值向下而不是向上答案

【问题标题】：CSS 'height' value going downwards instead of upwardsCSS“高度”值向下而不是向上
【发布时间】：2018-10-24 18:44:09
【问题描述】：

我正在使用 javascript 生成一个简单的条形图。我想让酒吧上升而不是下降。我该怎么做？

请注意，mainContainer 引用的是 HTML 中的 div，而我只是使用 javascript 添加样式。

var sampleData = [2, 8, 4, 5, 7, 3];

var mainContainer = document.querySelector(".graphite-container");

var addColumns = function(data) {
  for (i = 0; i < data.length; i++) {
    var column = document.createElement("div");
    column.className = "graphite-column";
    column.Id = 'column-' + (i + 1);
    column.innerHTML = column.Id;
    var columnValue = '';
    columnValue += (data[i] * 25) + 'px';
    $(column).css({
      "display": "inline-block",
      "height": columnValue,
      "background-color": "blue"
    });
    $(mainContainer).append(column);
  }
};

addColumns(sampleData);

【问题讨论】：

标签： javascript css position height

【解决方案1】：

您需要将vertical-align:bottom; 设置为列。

var sampleData = [2, 8, 4, 5, 7, 3];

var mainContainer = document.querySelector(".graphite-container");

var addColumns = function(data) {
  for (i = 0; i < data.length; i++) {
    var column = document.createElement("div");
    column.className = "graphite-column";
    column.Id = 'column-' + (i + 1);
    column.innerHTML = column.Id;
    var columnValue = '';
    columnValue += (data[i] * 25) + 'px';
    $(column).css({
      "display": "inline-block",
      "height": columnValue,
      "background-color": "blue",
      "vertical-align": "bottom"
    });
    $(mainContainer).append(column);
  }
};

addColumns(sampleData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graphite-container"></div>

【讨论】：

【解决方案2】：

G'day。电脑显示器的原点是左上角。它不是你习惯的左下角。这可能是您问题的根本原因。这是算法错误而不是编程错误。

【讨论】：