7

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

      <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 大师关心我似乎缺少的一点点吗？我用谷歌搜索过，大多数例子都非常复杂/复杂，

4

5 回答 5

26

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

bottom: 0相对定位的 div 不会改变任何东西。

如果你想使用相对定位，去掉 float 和 bottom 并使用display: inline-blockand vertical-align: baseline;。此外，在这种情况下，您需要去掉 HTML 中内部 div 之间的任何空格（换行符）。

像这样（您可以在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;
}
于 2012-05-24T02:23:33.387 回答
3

我个人会避免在每个元素上显式设置 xpos，这会降低可维护性。在某些情况下，基于百分比的值转储也更合适。考虑到这一点，一个 imo 更具可扩展性和语义正确的方法已被模拟为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>可以完全放弃元素以支持伪元素。

于 2012-05-24T03:05:47.900 回答
2

Kolink 的回答是正确的。每个bar 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/查看上面代码的结果。

于 2012-05-24T02:46:23.767 回答
1

如果给 parent position: relative，那么您可以使用position: absolutefor childdiv通过设置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>

于 2018-02-26T21:14:13.783 回答
0

使用position: absolute, 代替float:left;使用left: 0px;,8px等等16px。
也添加position: relative到容器中。

于 2012-05-24T02:09:22.437 回答