html - 文本垂直对齐和旋转文本有问题

Question

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

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

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