0

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

4

3 回答 3

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，还应用固定的 to.graph li来对齐条和描述。

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

于 2012-05-23T00:55:45.723 回答
0

假设列可以是固定高度，您可以这样编码：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>​
于 2012-05-23T00:43:13.950 回答
0

也许这会给你一些想法： http: //matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm 我通常只使用 div 并通过 css 和/或 javascript 控制它们，这取决于你的列是否是动态的或静态的。更漂亮的方法是 SVG，为此可以在以下位置找到一个整洁的库： http: //g.raphaeljs.com/

祝你今天过得愉快！

于 2012-05-23T00:46:27.877 回答