文本和旋轉文本的垂直對齊遇到麻煩

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>