1

私はjqueryタブを使用しており、タブの1つに4つのGoogleチャートがあります(それぞれがdivに含まれています)。タブ領域の 1/4 に各 div を配置したい。(画面の北、南、東、西)。

現在、私のhtmlは次のとおりです。

<div id="chartsTab">
<!--Div that will hold the volume column chart-->
<div id="chart_div_volume" style="width:400; height:300"></div>
</div>
<div id="chart_div_midp" style="width:400; height:300"></div>
</div>
</div>
<div id="chart_div_spread" style="width:400; height:300"></div>
</div>
</div>
<div id="chart_div_volatility" style="width:400; height:300"></div>
</div>

したがって、私のチャートは上下に並んでいます。

4

2 に答える 2

0

これが例を示す実用的なフィドルです。

HTML：

<div id="chartsTab">
    <!--Div that will hold the volume column chart-->
    <div id="chart_div_volume" class="tab" ></div>
    <div id="chart_div_midp" class="tab"></div>
    <div style="clear:both"></div>
    <div id="chart_div_spread" class="tab"></div>
    <div id="chart_div_volatility" class="tab"></div>
</div>

clear:both新しい行を強制する場所でのdivの使用に注意してください。

幅をお好みの幅に調整するだけです。フルスクリーンで表示したい場合は、％の使用を検討してください。ただし、ブラウザのサイズを変更すると、％が誤ったサイズになる可能性があることに注意してください。したがって、％を使用する場合は、を追加することを検討してmin-widthください。

CSS：

.tab {
    float: left;
    width: 400px;
    height: 3000px;
}
于 2013-03-20T21:53:58.133 に答える
0

グラフの幅を 50% にし、左にフロートします。

html:

<div id="chartsTab">
    <!--Div that will hold the volume column chart-->
    <div id="chart_div_volume" class="tab" >1</div>
    <div id="chart_div_midp" class="tab">2</div>
    <div id="chart_div_spread" class="tab">3</div>
    <div id="chart_div_volatility" class="tab">4</div>
</div>

CSS:

#chartsTab {
    width: 200px;
}
.tab {
    float: left;
    width: 50%;
    height: 100px;
}

.tab:nth-child(1){
 background-color: #f00;   
}

.tab:nth-child(2){
 background-color: #0f0;   
}

.tab:nth-child(4){
 background-color: #00f;   
}

.tab:nth-child(5){
 background-color: #000;   
}

http://jsfiddle.net/2wePu/2/

于 2013-03-20T22:05:42.423 に答える