-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>

jsフィドル

インライン CSS に記載されているように、各バーの幅と左側の距離が正確であることが重要です。バーは動的に生成され、私はそれらの順序に影響を与えることはなく、1 つのバーが他のバーと重なっているかどうかを判断することもできません。

通常の HTML 出力では、バー #1 と #2 の間にオーバーラップが生じます。ただし、バー同士が重ならないようにして、バー #1 の下にバー #2 が表示されるようにしたいのですが、左に正しい距離があります。

オーバーラップする各バーの設定を手動で変更することはできないtopため、動的な解決策を探しています。ティア

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

バーが重なり合うのではなく、より自然に流れるようにしたい場合は、バーを完全に配置することは正しい道ではないかもしれません. を試してみてくださいfloat: left。空きがあれば同じ行に配置されます。それ以外の場合は、下に移動します。

そして、タグの順序を変更するとバー #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 に答える