使用CSS创建列栏（如图表）

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

假设这些列可以是固定高度的，您可以将其编码为：

上校{
宽度：100px；
浮动：左；
背景：灰色；
右边距：10px；
填充：20px；
位置：相对位置；
}
上校一号{
高度：200px；
}
上校二{
高度：180像素；
边缘顶部：20px；
}
中校{
位置：绝对位置；
底部：40px；
边框底部：1px纯白；
垫底：10px；
}
p.bottom上校{
位置：绝对位置；
底部：10px；
}
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
​

也许这会给你一些想法： 我通常只使用div并通过css和/或javascript控制它们，这取决于您的列是动态的还是静态的。更漂亮的方法是SVG，因为它可以在以下位置找到一个整洁的库：

---

祝你今天愉快

考虑到这些描述，这就成了一个更难的问题。条形图相对简单，可以使用语义标记构建（尽管这可能会有所改进）：

这是一个有效的演示：

我添加了两个示例类，它们假设从1到10的比例，尽管手动将高度设置为内联样式或将其设置为数据属性并使用JavaScript更新高度可能更为实际。我会让你自己来决定

将描述保持在与条形图相同的元素中可能很棘手，因为这样会造成列与每列中的任意点对齐的情况。不需要更多地使用它，我会为描述创建一个单独的列表，并对其进行样式设置，使其位于图表下方，如下所示：

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

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

然后修改样式，以便在

.bar

中应用颜色和位置，但也应用固定的with to

.graph li

以对齐条形图和说明

---

复杂性完全取决于您希望布局的灵活性。我建议你投入进去，看看你能取得什么成就，玩选择器和规则，直到你得到你需要的效果。我故意对其中一些要点含糊其辞，这样你就有机会了解哪些有效，哪些无效。

它完成了任务，但额外的类有点多，而且没有利用语义容器。还有，这个描述是怎样的呢？A-List-Apart的文章并不是真的在谈论同一件事。是的，但是这个家伙想学习css和专栏，所以这些都是关于这个主题的一些很好的链接。另外，您可以编写这些列表并对元素应用颜色以实现上述结果。谢谢@derekerdmann，我已经更新了图表，使其变得有点复杂了。@nilpun-我不会为您编写完整的解决方案。唯一需要更改的是，您可能需要手动将详图索引项放置在侧面。

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

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

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