html - 放置一个左边有绝对空间，顶部有 float 特性的方 block

Question

我想使用 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

重要的是每个栏都具有正确的宽度和与内联 CSS 中所述的到左侧的准确距离。条形是动态生成的，我无法影响它们的顺序，也无法确定一个条形是否与另一个重叠。

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

我无法为每个会重叠的栏手动更改 top 设置，因此我正在寻找动态解决方案。时间差

Answer 1

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

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 solution

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();
    }
});