1

我正在使用 jquery 选项卡，并且在我的一个选项卡中有 4 个谷歌图表（每个包含一个 div）。我想将每个 div 放置在选项卡区域的 1/4 上。（在屏幕的北部、南部、东部和西部）。

现在我的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 回答