-1

我想使用 HTML 和 css 显示条形图：

 <style type="text/css">
      #container {
        position: relative;
        height:20px;
      }
      .bar {
        position:absolute;
        top:0px;
        height:100%;
        background-color:orange;
        border:1px solid black;
      }
    </style>

<div id="container">
  <div class="bar" style="left:0px; width:100px">&nbsp;</div>
  <div class="bar" style="left:20px; width:30px">&nbsp;</div>
  <div class="bar" style="left:110px; width:10px">&nbsp;</div>
</div>

jsFiddle

重要的是，每个条都具有正确的宽度和到左侧的确切距离，如 inline-CSS 中所述。这些条是动态生成的，我对它们的顺序没有影响，也无法确定一个条是否与另一个重叠。

正常的 HTML 输出会在 #1 和 #2 条之间产生重叠。但是，我希望条形之间没有重叠，并在条形 #1 下看到条形 #2，但与左侧的距离正确。

我无法手动更改top将重叠的每个条的设置，因此我正在寻找动态解决方案。TIA

4

3 回答 3

2

也许您正在寻找 和 的position: absolute组合float: left。尝试将条形图放入另一个具有设定宽度且绝对定位在您希望条形图所在位置的容器中，然后将每个条形图漂浮在容器内。像这样：

jsFiddle（尝试改变你的窗口大小，看看会发生什么）

HTML

<div id="container">
    <div id="abs">
        <div class="bar" style="background-color:green; width:30px">&nbsp;</div>
        <div class="bar" style="background-color:blue; width:100px">&nbsp;</div>
        <div class="bar" style="width:10px">&nbsp;</div>
    </div>
</div>

CSS

#container {
    position: relative;
    height:20px;
}
#abs {
    border: 1px solid red;
    position: absolute;
    left: 20px;
    width: 50%;
}
.bar {
    height:100%;
    background-color:orange;
    border:1px solid black;
    float:left;
}

我不认为你可以不使用 JavaScript 做你想做的事。您已经指出 JS 解决方案不适合您，但也许这个解决方案对其他偶然发现这篇文章的人有用。这可能需要调整，但它应该给出一个关于如何做到这一点的基本想法：

jQuery解决方案

var lastX = 0;
$('.bar').each(function() {
    if (parseInt($(this).css('left')) < lastX) {
        $(this).css('top', parseInt($(this).css('top'))+25);
    } else {
        lastX = lastX + $(this).width();
    }
});
于 2013-06-28T12:52:24.710 回答
0

如果您希望条更自然地流动，而不是重叠，那么绝对定位它们可能不是正确的路径。Try float: left，如果有空间，这会将它们放在同一条线上；否则，它将移动到下方。

当您说如果您更改标签的顺序时，bar #2 根本不显示，那是因为 z 顺序。它显示在较大的栏后面，因此根本不可见。

于 2013-06-28T12:21:29.717 回答
0

如果您只想使用绝对位置，那么您将不得不像这样定位它们。

<div id="container">
  <div class="bar" style="left:0px; width:100px">&nbsp;</div>
  <div class="bar" style="left:110px; width:30px">&nbsp;</div>
  <div class="bar" style="left:140px; width:10px">&nbsp;</div>
</div>

如果您可以使用其他方式，您可以使用float:left;保证金来做到这一点。

希望这可以帮助

于 2013-06-28T12:22:38.930 回答