css - 使用 CSS 创建柱状图(如图表)

Question

我不是 CSS 专家。有人可以帮助是否可以使用纯 CSS 创建如下所示的列吗？

Answer 1

当考虑到描述时，这就变成了一个更难的问题。条形图相对简单，可以用一些语义标记来构建(尽管这可能会有所改进):

<ul class="graph">

  <li class="height10">
    <h1>Category 1</h1>
    <div>
      <h2>Subtitle</h2>
      <p>More text</p>
    </div>
  </li>

  <li class="height9">
    <h1>Category 2</h1>
    <div>
      <h2>Subtitle</h2>
      <p>More text</p>
    </div>
  </li>

</ul>

还有样式，

.height10 { height: 300px; }
.height9 { height: 270px }
/** add more through height1 **/

h1, h2, p { margin: 0; padding: 0; }
h1 { margin: 0.5em; }

li {
  margin-right: 0.5em;
  display: inline-block;
  background: #9f9;
  position: relative;
  vertical-align: bottom;
}

li div {
  margin: 1em;
  position: absolute;
  left: 0; bottom: 0;
}

这是一个工作演示:http://jsbin.com/obexew

我添加了几个假设比例从 1 到 10 的示例类，尽管手动将高度设置为内联样式或将其设置为数据属性并使用 JavaScript 更新高度可能更实用。我会把它留给您来解决和决定。

将描述与栏保持在同一元素中可能会很棘手，因为它会造成列与每列中的任意点对齐的情况。无需更多操作，我会创建一个单独的描述列表，并设置样式以将其放置在图表下方，如下所示:

<ul class="graph bars">
    <li><!-- stuff here --></li>
</ul>

<ul class="graph descriptions">
    <li><!-- description here --></li>
</ul>

然后修改样式，以便在 .bars 中应用颜色和位置，同时对 .graph li 应用固定的 with 以对齐条形和描述.

复杂性完全取决于您希望布局的灵 active 。我建议只深入研究，看看可以实现什么，并尝试使用选择器和规则，直到获得所需的效果。我故意对其中一些要点含糊其词，以便您有机会了解哪些有效，哪些无效。