在垂直对齐文本和旋转文本时遇到问题

Question

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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的第一个也是最重要的问题是我不能让X轴中的旋转文本（class =＆＃34; verticaltext＆＃34;）可靠地定位在下面的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>