文本和旋转文本的垂直对齐遇到麻烦

Question

我正在尝试创建一个简单的条形图，但是CSS存在很大的问题。 是的，我对D3撞了一段时间，但放弃了，决定创建自己的。 这是我的代码：

请注意，它是从一个较大的页面中提取的，该页面包含在单个div中，但是我将其放在单独的SO页面中。

 #B2Card { height: 340px; padding: 0; padding-bottom: 5px; } #B2CardLeft { position: absolute; height: inherit; float: left; width: 10%; text-align: right; } #B2CardRight { float: right; width: 90%; height: inherit; } #BarChart { float: left; height: 75%; width: 100%; border-left: 2px solid white; border-bottom: 2px solid white; text-align: left; } #BarChartXAxis { float: left; height: 25%; width: 100%; background-color: #0FC; } .verticaltext { position: absolute; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); bottom: -85%; color: #fff; } 

 <div id="B2Card"> <div id="B2CardLeft"> <p class="YAxis">60</p> <p class="YAxis">50</p> <p class="YAxis">40</p> <p class="YAxis">30</p> <p class="YAxis">20</p> <p class="YAxis">10</p> </div> <div id="B2CardRight"> <div id="BarChart"></div> <div id="BarChartXAxis"> <p class="verticaltext" style="left:32%;">2017-10-10</p> <p class="verticaltext" style="left:33%;">2017-10-11</p> <p class="verticaltext" style="left:34%;">2017-10-12</p> <p class="verticaltext" style="left:35%;">2017-10-13</p> <p class="verticaltext" style="left:36%;">2017-10-14</p> </div> </div> </div> 

我的第一个也是最重要的问题是，我无法使X轴上的旋转文本（class =“ verticaltext”）可靠地定位在下div（#BarChartXAxis）中。 我已经尝试过各种值的左/右/底等，但文字无处不在。 我终于使用上面的代码使它工作了，但是，一旦我改变了浏览器窗口的大小，它就会再次变得杂乱无章。 请注意，日期是即时生成的，因此日期可能少至7个，最多可能多达90个。因此，我需要能够动态调整日期。

我的第二个问题是小问题-我无法使Y轴文本位于它所在的Div的底部（＃B2CardLeft）。

对于上述两种情况，如果愿意，我愿意使用jQuery。 TIA！

Answer 1

解决第一个问题：

 #B2Card { height: 340px; padding: 0; padding-bottom: 5px; } #B2CardLeft { height: inherit; float: left; width: 10%; text-align: right; } #B2CardRight { float: right; width: 90%; height: inherit; position: relative; } #BarChart { float: left; height: 75%; width: 100%; border-left: 2px solid white; border-bottom: 2px solid white; text-align: left; } #BarChartXAxis { float: left; height: 25%; width: 100%; background-color: #0FC; } .verticaltext { position: absolute; transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); bottom: 15px; color: #fff; } 

 <div id="B2Card"> <div id="B2CardLeft"> <p class="YAxis">60</p> <p class="YAxis">50</p> <p class="YAxis">40</p> <p class="YAxis">30</p> <p class="YAxis">20</p> <p class="YAxis">10</p> </div> <div id="B2CardRight"> <div id="BarChart"></div> <div id="BarChartXAxis"> <p class="verticaltext">2017-10-10</p> <p class="verticaltext" style="left:4%">2017-10-11</p> <p class="verticaltext" style="left:8%">2017-10-12</p> <p class="verticaltext" style="left:12%">2017-10-13</p> <p class="verticaltext" style="left:16%">2017-10-14</p> </div> </div> </div>