CSS 条形图 - 非常简单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10730233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS bar graph - very simple
提问by Alex.Barylski
I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".
我有一些非常基本的代码，除了所有内容都与顶部对齐外，它可以正常工作……理想情况下，条形将与底部对齐。我想我可以使用固定定位，因为尺寸是 50px x 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>
I don't want to use a library or JS add on. Keeping this light weight is mission critical.
我不想使用库或 JS 插件。保持这种轻量化是关键任务。
Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,
另外我更喜欢酒吧是垂直的。是否有任何 CSS 大师关心我似乎缺少的一些亮点？我用谷歌搜索过，大多数例子都远非复杂/复杂，
回答by Ana
First of all, separate your CSS from your HTML. You're repeating too much code when you could just use a bar class for your inner divs.
首先，将 CSS 与 HTML 分开。当您可以为内部 div 使用 bar 类时，您重复了太多代码。
bottom: 0doesn't change anything for relatively positioned div.
bottom: 0对于相对定位的 div，不会改变任何东西。
If you wish to use relative positioning, get rid of float and bottom and use display: inline-blockand vertical-align: baseline;. Also, in this case, you need to get rid of any space in the HTML between the inner divs (newline).
如果你想使用相对定位，去掉浮动和底部并使用display: inline-block和vertical-align: baseline;。此外，在这种情况下，您需要删除内部 div（换行符）之间的 HTML 中的任何空格。
Like this (you can see the demo at http://dabblet.com/gist/2779082):
像这样（你可以在http://dabblet.com/gist/2779082看到演示）：
HTML
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
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;
}
回答by zhujy_8833
Kolink's answer is correct. Each bar div's width is 8px, plus margin-left and margin-right, 8+1+1=10px. So I suggest, set the left value to 0px, 10px, 20px ...
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>
The css should look like this(I grouped some general css rules):
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;
}
You can check this link: http://jsfiddle.net/zhujy_8833/AFbt4/to see the result of the above code.
您可以查看此链接：http: //jsfiddle.net/zhujy_8833/AFbt4/以查看上述代码的结果。
回答by o.v.
I would personally avoid setting xpos explicitly on every element, makes things less maintainable. In some scenarious percentage-basedvalue dumps would be more appropriate too. With that in mind, an imo more scalable and semanticaly correct approach has been mocked up in a fiddle. HTML:
我个人会避免在每个元素上显式设置 xpos，这会使事情的可维护性降低。在某些情况下，基于百分比的价值转储也会更合适。考虑到这一点，在fiddle 中模拟了一种更可扩展且语义更正确的 imo 方法。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>
and CSS:
和 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;
}
This also gives you potential to get quite fancy - bars could have content with a negative text indent for semantic value or <span>elements could be abandoned altogether in favor of pseudo-elements.
这也使您有可能变得非常花哨 - 条形可能包含具有语义值的负文本缩进的内容，或者<span>可以完全放弃元素以支持伪元素。
回答by Stephen Quan
If you give the parent position: relative, then you can use position: absolutefor child divto place them in precise coordinates by setting left, top, right, bottom, width, heightyou can precisely control the placement of the bars in your bar chart.
如果您给 parent position: relative，那么您可以使用position: absolutechilddiv通过设置left, top, right, bottom,将它们放置在精确的坐标中width，height您可以精确地控制条形图中条形的位置。
.graph {
position: relative;
width: 54px;
height: 54px;
border: 1px solid blue;
background-color: lightgrey;
}
.bar {
position: absolute;
border: 1px solid blue;
background-color: yellow;
}<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
<div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
<div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
<div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
<div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
</div>
</div>
<p></p>
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
<div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
<div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
<div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
<div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
</div>
</div>回答by Niet the Dark Absol
Use position: absolute, and instead of float:left;use left: 0px;, 8px, 16pxand so on.
Also add position: relativeto the container.
使用position: absolute和替代float:left;使用left: 0px;，8px，16px等。
也添加position: relative到容器中。
