Html 如何将条形图粘贴到图表底部

我用html+css制作了一个图表（我真的需要它在所有浏览器中工作）

这没关系，但酒吧是在顶部，我需要他们坚持到底部

我尝试了垂直对齐和其他一些方法，但都不起作用

这是一个JSFIDLE（如果你看到它，你就会明白我的意思）

代码：

CSS:

HTML:

500
450
400
350
300
250
200
150
100
50
0
50
10
50
10


02-17
02-18


已收到

已发送

这是您的新CSS代码：

.clear {clear:both; line-height: 0; width: 0; height: 0}


#chart {
    width: 100%;
    height: 220px;
    font-family: Arial,sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #777777;
}
#scale, #chartwrap, #description {
    float: left;
    margin-right: 7px;
}
#scale {
    margin-top: -7px;
}
#scale i {
    display: block;
    text-align: right;
}
#chartbox {
    height: 170px;
    display: inline-block;
    border: 2px solid #C7C7C7;
    border-right: 0;
    border-top: 0;
}
.thisday {
    display: inline-block;
    height: 170px;
    margin: 0 18px;
    width: 40px;
    vertical-align: bottom;
    position: relative;
}
.vbottom {
    display: block;
    position: absolute;
    bottom:0px;
}
.thisday .in, .thisday .out {
    width: 18px;
    display: inline-block;
    vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
    text-align: center;
    font-size: 11px;
    color: #2F6D91;
    display: block;
}
div.inbar, div.outbar {
    width: 18px;
    float: left;
    background: #41799F;
}
div.outbar {
    background: #A5D2F0;
}
div#days {
    margin-top: 5px;
}
div#days i {
    font-size: 11px;
    float: left;
    width: 36px;
    margin: 0 18px;
}
#description {
    margin-left: 7px;
}
#outdes {
    margin-top: 1px;
}
#indes i, #outdes i {
    float: left;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #40779D;
}
#outdes i {
    background: #A5D2F0;
}
#indes span, #outdes span {
    float: left;
    margin-left: 3px;
    line-height: 12px;
    font-size: 11px;
}

总而言之，我刚刚添加了

位置：relative

到

的末尾。今天

，我还添加了

位置：绝对然后
底部：0px至
.vbottom

而且，如果有一天你放大你的图片，这种方法仍然有效。它会粘在你的图表底部，你不必从顶部开始。如果你想让这些条从底部多少移动一个像素，只需执行
bottom:-1px或
底部：1px而不是0px，它将被重新调整
 这将使条形图始终沿图表底部对齐。这是一个很好的解决方案，只要您不需要支持早于8的IE版本

.thisday {
    display: inline-table;
    height: 170px;
    margin: 0 18px;
    width: 40px;
}
.vbottom {
    display: table-cell;
    vertical-align: bottom
}

。这一天
是容器，已经给出了
显示：内联表格
，应该在底部的区域有
显示：表格单元格
和
垂直对齐：底部

编辑：由于
.vbottom
不是绝对定位的，
上的
宽度
。如果您可能希望每天添加更多的条，则可以完全忽略这一天。这是这种方法的一个明显优点

叉形提琴：
为图表框添加相对位置类：

position: relative;

position: absolute;
bottom: 0;

vbottom类的绝对位置：

position: relative;

position: absolute;
bottom: 0;

更新（我在devtools中工作，不保存更改，这里是更新版本）：

谢谢nicklas，但据我所知，IE 7和belowAh中不支持表格单元格，因此在您的情况下，这不是解决问题的方法。但除此之外，这是一个可靠的选择！我在回答中添加了一句关于IE支持的话。谢谢，但小提琴和我有同样的问题，我想你是想添加位置：相对。今天（不是chartbox）不，更新还可以。谢谢你，所以添加位置：相对#chartbox或没有区别。今天，我投了赞成票，但有人在我之前投了反对票