cssについての質問です。

divを使って棒グラフを作ろうとしているのですが、ソースは次のようになります。

<table><tr><td>グラフタイトル</td></tr><tr><td>ここにdivが複数入る</td></tr></table>

グラフの棒は次のようなdivになります。
divの要素数、およびheightは可変です。

<div style='float:left;margin-left:1;background-color:#000000;width:5;heigh:100'></div>
<div style='float:left;margin-left:1;background-color:#000000;width:5;heigh:120'></div>
<div style='float:left;margin-left:1;background-color:#000000;width:5;heigh:140'></div>

発生する問題は、div要素が上部で揃ってしまうためグラフが逆さになってしまいます。
ちょうどつららのようになるわけですが、これをひっくり返したいというのが希望です。

解決方法を教えていただけると助かります、よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2009/04/06 12:14:48
  • 終了:2009/04/06 12:59:15

ベストアンサー

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012009/04/06 12:44:39

ポイント100pt

ひとつの案でしかありませんが

「トップマージンを適宜設定してやることで下に押しやる」ではいかが?

<div style='float:left;margin-top:200;margin-left:1;background-color:#000000;width:5;height:100'></div>
<div style='float:left;margin-top:100;margin-left:1;background-color:#000000;width:5;height:200'></div>
<div style='float:left;margin-top:  0;margin-left:1;background-color:#000000;width:5;height:300'></div>
id:southgate_01

ありがとうございます、速攻で解決しました。

大変助かりました。

2009/04/06 12:58:53
  • id:sakuragaoka
    値0の場合以外は単位はちゃんと設定したほうがいいですよ。
    >>
    <div style='float:left;margin-top:200px;margin-left:1px;background-color:#000000;width:5px;height:100px'></div>
    <div style='float:left;margin-top:100px;margin-left:1px;background-color:#000000;width:5px;height:200px'></div>
    <div style='float:left;margin-top: 0;margin-left:1px;background-color:#000000;width:5px;height:300px'></div>
    <<
    validでないという理由の他に、場合によっては単位なしはemと解釈されることがあるので(この場合はないけど)混乱することもあります。
  • id:Mook
    作成している間に締め切りになってしまいましたが、せっかく作ったのでコメントで失礼します。
    やっていることは同じですが、JavaScript で margin-top を自動計算する例です。
    (インデントのために全角スペースを使用しているので、半角に置換後実行してください。)
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function setgraph(){
    function setgraph(){
      var max = 0;
      var gr = document.getElementById( "graph" ).getElementsByTagName( "div" );
      for ( i=0 ; i<gr.length ; i++ )
        if ( max < parseInt( gr[i].style.height ) ) { max = parseInt( gr[i].style.height ) };

      for ( i=0 ; i<gr.length ; i++ )
        gr[i].style.marginTop = ( max - parseInt( gr[i].style.height ) ) + "px" ;
    }
    -->
    </script>
    </head>
    <body onload="setgraph();">
    <table border="1">
    <tr><td>グラフタイトル</td></tr>
    <tr><td>
    <div id="graph">
      <div style='float:left;margin-left:1;background-color:#0000FF;width:10;height:300'></div>
      <div style='float:left;margin-left:1;background-color:#00FF00;width:10;height:200'></div>
      <div style='float:left;margin-left:1;background-color:#FF0000;width:10;height:100'></div>
    </div>
    </td></tr>
    </table>
    </body>
    </html>
  • id:southgate_01
    southgate_01 2009/04/07 20:17:54
    おぉ、コメントありがとうございます。
    書いていただいたコードも早速試してみます。
  • id:Mook
    アップの際のゴミが入ってしまったようです。
    function setgraph(){
    がかぶってますので、1行を削除してお試しください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません