纯CSS柱状图优化：添加坐标轴刻度、标签及主Div外文本方法

嘿，我来帮你搞定这个CSS柱状图的需求！先给你上修改后的完整代码，再拆解每个需求的实现逻辑——

<!-- 主div外部的文本，直接放在外面就行 -->
<h2>月度销售数据柱状图</h2>
<p>这是主div外部添加的说明文本~</p>

<div id="main">
  <!-- Y轴刻度容器 -->
  <div class="y-axis">
    <span style="--value: 0">0</span>
    <span style="--value: 10">10</span>
    <span style="--value: 20">20</span>
    <span style="--value: 30">30</span>
    <span style="--value: 40">40</span>
    <span style="--value: 50">50</span>
    <span style="--value: 60">60</span>
    <span style="--value: 70">70</span>
    <span style="--value: 80">80</span>
    <span style="--value: 90">90</span>
    <span style="--value: 100">100</span>
  </div>

  <!-- 柱子容器 -->
  <div class="bars-container">
    <div class="bar red" style="height: 75%"></div>
    <div class="bar blue" style="height: 45%"></div>
    <div class="bar green" style="height: 90%"></div>
  </div>

  <!-- X轴标签容器 -->
  <div class="x-labels">
    <span>红色柱子</span>
    <span>蓝色柱子</span>
    <span>绿色柱子</span>
  </div>
</div>

<style>
/* 主容器布局：相对定位，给Y轴刻度留位置 */
#main {
  position: relative;
  width: 300px;
  height: 400px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  padding-left: 40px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

/* Y轴刻度样式：绝对定位在左侧 */
.y-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  text-align: right;
  padding-right: 5px;
  box-sizing: border-box;
}

/* 每个Y轴刻度的位置计算 */
.y-axis span {
  display: block;
  height: 0;
  position: relative;
  top: calc((100 - var(--value))%);
  transform: translateY(-50%); /* 让刻度文本垂直居中对应刻度线 */
  font-size: 12px;
  color: #666;
}

/* 柱子容器：flex布局让柱子并排 */
.bars-container {
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: flex-end;
  gap: 15px;
}

/* 单个柱子样式 */
.bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
}

/* 柱子颜色（也可以直接写在style里，这里用类名更规范） */
.bar.red { background-color: red; }
.bar.blue { background-color: blue; }
.bar.green { background-color: green; }

/* X轴标签样式：flex布局和柱子对齐 */
.x-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.x-labels span {
  font-size: 12px;
  color: #333;
  flex: 1;
  text-align: center;
}
</style>

逐个拆解你的需求： #

1. Y轴0-100步长10的刻度

   • 我创建了一个.y-axis容器，里面放了11个<span>分别对应0到100的刻度值
   • 用CSS变量--value结合calc()计算每个刻度的垂直位置，top: calc((100 - var(--value))%)可以让100的刻度在顶部，0在底部，完美对应柱状图的高度比例
   • 给主容器加了左侧边框作为Y轴线，刻度文本右对齐紧贴轴线

2. X轴给每个柱子加对应名称

   • 新增了.x-labels容器，里面的每个<span>和柱子一一对应
   • 用flex布局让标签和柱子的宽度、位置完全对齐，保证每个标签正好在对应柱子的下方
   • 你可以直接修改标签里的文字，比如改成“产品A”“产品B”这类实际名称

3. 主div外部添加文本

   • 这个最简单！直接在<div id="main">的外面写任何HTML文本元素就行，比如我示例里的<h2>标题和<p>说明文本，完全不受柱状图容器的影响

另外提个小细节：你原来的代码里多个<div>用了同一个id="bar"，这不符合HTML规范（id必须唯一），所以我改成了class="bar"，用类名来复用样式，这样更规范哦~

内容的提问来源于stack exchange，提问作者margherita pizza