我正在试验使用 HTML 和 CSS 创建的两种不同的条形图:水平和垂直。如何将垂直条形图中的条形从中心移到底部？
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Global */
.stat-table-horz, .stat-table-vert {
border-collapse: collapse;
}
.bar {
background: #0c0;
}
/* Horizontal bar chart */
.stat-table-horz td:first-of-type {
padding: 5px;
}
.stat-table-horz td:nth-of-type(2) {
border-top: 1px solid #090;
border-bottom: 1px solid #090;
padding: 0;
width: 240px;
}
.stat-table-horz td .horz-bar {
height: 30px;
}
/* Vertical bar chart */
.stat-table-vert tr:nth-of-type(2) td {
padding: 5px;
}
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
}
.stat-table-vert td .vert-bar {
}<body>
<table class="stat-table-horz">
<tr>
<td>Health</td>
<td>
<!-- First bar -->
<div class="bar horz-bar" style="width: 10%;"></div>
</td>
</tr>
<tr>
<td>Attack</td>
<td>
<!-- Second bar -->
<div class="bar horz-bar" style="width: 90%;"></div>
</td>
</tr>
<tr>
<td>Speed</td>
<td>
<!-- Third bar -->
<div class="bar horz-bar" style="width: 60%;"></div>
</td>
</tr>
</table>
<br>
<table class="stat-table-vert">
<tr>
<td>
<!-- First bar -->
<div class="bar vert-bar" style="height: 10%;"></div>
</td>
<td>
<!-- Second bar -->
<div class="bar vert-bar" style="height: 90%;"></div>
</td>
<td>
<!-- Third bar -->
<div class="bar vert-bar" style="height: 60%;"></div>
</td>
</tr>
<tr>
<td>Health</td>
<td>Attack</td>
<td>Speed</td>
</tr>
</table>
</body>我原来的 JSFiddle:https://jsfiddle.net/jkantner/b7aa2yu1/
最佳答案
只需添加
.stat-table-vert td {
vertical-align:bottom;
}
关于html - 如何在 CSS 垂直条形图中底部对齐条形图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32230804/