如何在CSS垂直条形图中使条形底部对齐？
[英]How do I bottom-align bars in a CSS vertical bar chart?
问题描述
I am experimenting with two different bar charts I created using HTML and CSS: horizontal and vertical. 
我正在尝试使用HTML和CSS创建的两个不同的条形图：水平和垂直。 How do I move the bars in my vertical bar chart from the center to the bottom? 如何将垂直条形图中的条形从中心移动到底部？
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>
My original JSFiddle: https://jsfiddle.net/jkantner/b7aa2yu1/ 我最初的JSFiddle： https ：//jsfiddle.net/jkantner/b7aa2yu1/
4 个解决方案
解决方案1
2 2015-08-26 15:34:43
Just add 只需添加
.stat-table-vert td {
vertical-align:bottom;
}
解决方案2
1 已采纳 2015-08-26 15:38:02
Adding vertical-align: bottom to the containing TD seems to do it if I'm understanding you correctly. 如果我正确理解你的话，将vertical-align：bottom添加到包含的TD似乎可以做到。
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
vertical-align: bottom;
}
解决方案3
0 2015-08-26 15:41:51
Add flowing css 添加流动的CSS
.stat-table-vert td {
position: relative;
}
.stat-table-vert .bar.vert-bar{
position: absolute;
bottom: 0;
width: 100%;
}
or 要么
add 加
.stat-table-vert td {
vertical-align:bottom;
}
https://jsfiddle.net/b7aa2yu1/4/ https://jsfiddle.net/b7aa2yu1/4/
解决方案4
0 2015-08-26 15:43:52
Using vertical-align: bottom; 使用vertical-align: bottom; or vertical-align: baseline on the td element should fix the issue. 或vertical-align: baseline td元素上的vertical-align: baseline应解决此问题。
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; vertical-align: baseline; } .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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使这些div底部对齐？ - How to bottom-align these divs?
如何仅使用CSS底部对齐该btn组？ - How can I bottom-align this btn-group using only css?
如何在引导流体布局中底部对齐网格元素 - How do I bottom-align grid elements in bootstrap fluid layout
在div中将链接底部对齐 - bottom-align a link in a div
如何使用 css 在我的垂直导航栏中添加底部边框？ - How do I add a bottom border under contact in my vertical navigation bar using css?
如何摆脱 CSS 中的双垂直滚动条？ - How do I get rid of double vertical scroll bars in CSS?
Flex项目中的底部对齐文本 - Bottom-align text in a flex item
居中和底部对齐 flex 项目 - Center and bottom-align flex items
如何使用ChartJS在水平条形图上绘制垂直线？ - How do I draw a vertical line on a horizontal bar chart with ChartJS?
如何垂直放置条形图的条形，使其都位于容器的底部？ - How can I position bars of a bar chart vertically so they all sit at the bottom of container?
相关标签