Question

我有一些非常基本的代码，除了一切都与顶部对齐外，它的工作原理...理想情况下，条形将与底部对齐。我想我可以使用固定定位，因为尺寸是50px到50px的平方，但我更喜欢一些不太“固定”的东西。

      <div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
      </div>

我不想使用库或JS添加。保持这种轻量化是关键任务。

另外我更喜欢酒吧是垂直的。任何CSS专家都在关注我似乎缺少的光线？我用谷歌搜索过，大多数例子都很复杂/复杂，

Answer 1

首先，将CSS与HTML分开。当你可以为你的内部div使用一个bar类时，你会重复太多的代码。

bottom: 0不会为相对定位的div更改任何内容。

如果您希望使用相对定位，请摆脱浮动和底部并使用display: inline-block和vertical-align: baseline;。此外，在这种情况下，您需要删除内部div（换行符）之间HTML中的任何空格。

像这样（你可以在http://dabblet.com/gist/2779082看到演示）：

<强> HTML

<div class="graph">
        <div style="height: 22px;" class="bar"></div><!--
        --><div style="height: 11px;" class="bar"></div><!--
        --><div style="height: 6px;" class="bar"></div><!--
        --><div style="height: 49px;" class="bar"></div><!--
        --><div style="height: 28px;" class="bar"></div>
</div>

<强> CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}
.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}

Answer 2

Kolink的回答是正确的。每个条形div的宽度为8px，加上margin-left和margin-right，8 + 1 + 1 = 10px。所以我建议，将左边的值设置为0px，10px，20px ......

<div class="wrapper">
    <div style=" left:0px;height:22px;"></div>
    <div style="left:10px;height:11px;"></div>
    <div style="left:20px;height:6px;"></div>
    <div style="left:30px;height:49px;"></div>
    <div style="left:40px;height:28px;"></div>
</div>

css应该是这样的（我将一些通用的css规则分组）：

.wrapper{
  border: 1px solid #aeaeae; 
  background-color: #eaeaea; 
  width: 50px; 
  height: 50px;
  position : relative;

}

.wrapper > div{
  bottom: 0px;
  width: 8px;
  position : absolute;
  background-color: #aeaeae; 
  margin: 1px;
  display : inline-block; 

 }

您可以查看以下链接：http://jsfiddle.net/zhujy_8833/AFbt4/以查看上述代码的结果。

Answer 3

我个人会避免在每个元素上明确设置xpos，使事情变得不那么易于维护。在一些基于百分比的基于价值的转储中也会更合适。考虑到这一点，在fiddle中模拟了一种更具可扩展性和语义正确性的方法。 HTML：

<ul class="graph">
    <li><span style="height:45%"></span></li>
    <li><span style="height:12%"></span></li>
    <!--as many more items as you want !-->
</ul>

和CSS：

.graph {
    border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
    float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
    width:8px; height:50px; /*set a bar width and a full height*/
    float:left; /*to have bars "left-aligned"*/
    position:relative; /*needed for the actual bar fill element*/
    margin:2px;
 }
 .graph li+li {
    margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
 }
 .graph span {
    position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
                                                  widths will be set inline*/
    background-color: #aeaeae;
 }

这也让你有可能变得非常有趣 - 条形可以包含带有语义值的负文本缩进的内容，或者可以完全放弃<span>元素以支持伪元素。

Answer 4

使用position: absolute代替float:left;使用left: 0px;，8px，16px等。
同时将position: relative添加到容器中。

CSS条形图 - 非常简单

4 个答案: