javascript - CSS“高度”值向下而不是向上
问题描述
我正在使用 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);
解决方案
您需要设置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>
推荐阅读
- sql-server - 打印出表名和列名时获取表中的第一行
- java - javaFX 翻译动画不会双向触发?
- sql - SQL树叶节点更新
- linux - 允许在 SELinux 中对具有不同上下文的不同文件进行具有自定义上下文的守护进程操作
- reactjs - 无法从 react-native-customized-image-picker 获取数据响应对象
- ms-access - 如何计算 DCounts 的平均值
- ruby-on-rails - 如何强制从我的架构中删除表?
- iis - MSDeploy“以代码 6 退出”随机发生
- c# - 绑定到自定义 XML 部分在部署中不起作用
- python-3.x - 如何从文档字符串生成 API 文档,用于功能代码