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固定，以对齐条形和描述。

复杂性完全取决于您希望布局的灵活性。我建议您潜入并了解您可以实现的目标，并使用选择器和规则，直到您获得所需的效果。我故意对其中一些观点含糊不清，因此你有机会了解哪些有效，哪些无效。

Answer 2

假设列可以是固定高度，您可以这样编码： http://jsfiddle.net/8S5xC/

<style type="text/css">

.col {
    width: 100px;
    float: left;
    background: grey;
    margin-right: 10px;
    padding: 20px;
    position: relative;
}

.col.one {
    height: 200px;
}

.col.two {
    height: 180px;
    margin-top: 20px;
}

.col p.mid {
    position: absolute;
    bottom: 40px;
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}
.col p.bottom {
    position: absolute;
    bottom: 10px;
}
</style>

<div class="col one">
    <p class="top">some text here</p>
    <p class="mid">some text here</p>
    <p class="bottom">some text here</p>
</div>
<div class="col two">
    <p class="top">some text here</p>
    <p class="mid">some text here</p>
    <p class="bottom">some text here</p>
</div>

Answer 3

也许这会给你一些想法：http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm 我通常只使用div并通过css和/或javascript控制它们，取决于你的列是动态的还是静态的。更精美的方法是SVG，因为在http://g.raphaeljs.com/

找到一个整洁的库

度过美好的一天！

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

3 个答案: