如何在CSS垂直條形圖中使條形底部對齊？
[英]How do I bottom-align bars in a CSS vertical bar chart?
問題描述
我正在嘗試使用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/
4 個解決方案
解決方案1
2 2015-08-26 15:34:43
只需添加
.stat-table-vert td {
vertical-align:bottom;
}
解決方案2
1 已采納 2015-08-26 15:38:02
如果我正確理解你的話，將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
添加流動的CSS
.stat-table-vert td {
position: relative;
}
.stat-table-vert .bar.vert-bar{
position: absolute;
bottom: 0;
width: 100%;
}
要么
加
.stat-table-vert td {
vertical-align:bottom;
}
解決方案4
0 2015-08-26 15:43:52
使用vertical-align: bottom; 或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>
如何使用 css 在我的垂直導航欄中添加底部邊框？
[英]How do I add a bottom border under contact in my vertical navigation bar using css?
如何垂直放置條形圖的條形，使其都位於容器的底部？
[英]How can I position bars of a bar chart vertically so they all sit at the bottom of container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.