html和css制作柱状图 图下带名称

可以使用以下代码来制作一个带有名称的柱状图：

HTML代码：

<div class="chart-container">
  <div class="chart-bar" style="height: 80%;">
    <span class="chart-label">Label 1</span>
  </div>
  <div class="chart-bar" style="height: 50%;">
    <span class="chart-label">Label 2</span>
  </div>
  <div class="chart-bar" style="height: 70%;">
    <span class="chart-label">Label 3</span>
  </div>
  <div class="chart-bar" style="height: 90%;">
    <span class="chart-label">Label 4</span>
  </div>
  <div class="chart-bar" style="height: 60%;">
    <span class="chart-label">Label 5</span>
  </div>
</div>

CSS代码：

.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 300px;
  width: 500px;
  background-color: #f5f5f5;
  padding: 20px;
}

.chart-bar {
  width: 50px;
  background-color: #4285f4;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-label {
  margin-top: 5px;
  font-size: 12px;
  color: #333;
  text-align: center;
}

在这个例子中，我们添加了一个新的 `span` 元素来显示每个柱子的标签。我们使用了 `display: flex` 和 `flex-direction: column` 来使标签垂直居中，并使用 `align-items: center` 将其水平居中。我们还使用了 `margin-top` 和 `font-size` 属性来调整标签的位置和大小。