如何在CSS垂直条形图中底部对齐条形？

我正在尝试使用HTML和CSS创建的两个不同条形图：水平和垂直。如何将垂直条形图中的条从中心移动到底部？如何在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/

来源

2015-08-26 Jon Kantner

添加垂直对齐：底部的含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; 
}

来源

2015-08-26 15:38:02

只需添加

.stat-table-vert td { 
    vertical-align:bottom; 
}

来源

2015-08-26 15:34:43 Alex

哦，所以它看起来像我真的不需要我的.vert酒吧类呢？谢谢！我需要改变这些竖条的方法。 –

你想要做什么...没有 – Alex

添加流动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; 
}

https://jsfiddle.net/b7aa2yu1/4/

来源

2015-08-26 15:41:51

使用vertical-align: 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; 
 
    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>

Vertical align

来源

2015-08-26 15:43:52 Stewartside

如何在CSS垂直条形图中底部对齐条形？

回答

相关问题