0

HTML でいくつかの統計棒グラフを作成し、同じ棒で 2 つの異なる色を使用して 2 つの異なる値を表現したいと考えています。バーには、60% の緑と残りの 40% の赤が表示されます。

最初に赤いものを表示し、その上に緑のものを表示することを考えていたので、下の部分を覆うと、次のようになります。

スタイル

.bar1{
    width:40px;
    background-color:#A55541;
    position:left;
}
.bar2{
    width:40px;
    background-color:#CA804F;
    position:left;
}

HTML

<div style="height:<?=$max ?>px; margin-top:10px;" class="bar1"</div>
<div style="height:<?=$max-($mistakes*$scale) ?>px; margin-top:10px;" class="bar2"</div>

しかし、うまくいきません。誰もそれを解決する方法を知っていますか?? ここで同様の質問を探していましたが、見つかりませんでした。

4

3 に答える 3

1

あなたはこれを試みることができます：

PHP

<?php
$max = 300;
$mistakes = 100;
$scale = 1;
?>

HTML

<div style="height:<?=$max ?>px;" class="bar1"></div>
<div style="height:<?=$max-(mistakes*scale) ?>px;" class="bar2"></div>

CSS

.bar1{
    width:40px;
    background-color:red;
    position: absolute;
}
.bar2{
    width:40px;
    background-color:green;
    position: fixed;
}

http://jsfiddle.net/BDNXS/

于 2013-08-14T15:20:15.077 に答える
1

このコードを正しく動作させるには、次のような別のクラスを作成します。

.container {
       width : 40px;
       height: 100px;
       position: relative
 }

そして、bar1 の位置を相対位置に、bar2 の位置を絶対位置に、bottom: 0px および z-index: 100 にします。コンテナ クラス内に 2 つの div を追加し、php で高さの代わりに bar2 'top' を設定します。

于 2013-08-14T15:41:31.960 に答える
0

これはあなたが探しているものと一致しますか?

<?php
$max = 100;
$mistakes = 40;
$scale = 1;
?>
<html>
<style>
.bar1{
    width:40px;
    background-color:green;
    float:left;
        z-index:1;
        position: absolute;
}
.bar2{
    width:40px;
    background-color:red;
    float:left;
    z-index:2;
        position: absolute;
}
</style>
<div style="height:<?php echo $max ?>px;" class="bar1"></div>
<div style="height:<?php echo $max -($mistakes*$scale) ?>px;" class="bar2"></div>
</html>

エコーを追加し、マージントップを削除しました。これは、あなたが意図していると思うレイアウトを台無しにするためです。

于 2013-08-14T15:01:29.927 に答える