Html 使用CSS动态调整表中div的大小

我在这个网站上搜索过，似乎动态调整组件大小的最佳方法是通过CSS“位置”和“宽度/高度”参数

我有一个部分看起来像这样的应用程序：

它目前正在通过Javascript（

$（window.width（），$（window.height（）

）调整大小，我希望通过CSS正确地调整大小

以下是我的表格布局：

<table class="table">
    <tr >
        <td >
            <div id="chartdiv1" ></div>
        </td>
        <td rowspan="3">
            <div id="Simulation" ></div>
            <div id="SimLabels" style="border: dashed; z-index: 1; width: 190px; position: relative; ">
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="BedMassLabel"><strong style="color: #4bb2c5;">Bed Mass (kg)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="H2OBedLabel"><strong style="color: #EAA228;">H2O in Fluid Bed (kg)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="BedTempLabel"><strong style="color: #c5b47f;">Temperature of Bed (C)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="evapRateLabel"><strong style="color: #579575;">Evaporation Rate (?)</strong>
            </div>
        </td>
    </tr>
    <tr >
        <td>
            <div id="chartdiv2" ></div>
        </td>
    </tr>
    <tr >
        <td >
            <div id="chartdiv3" ></div>
        </td>
    </tr>    
</table>

床重（kg）

流化床中的H2O（kg）

床温（C）

蒸发率（？）

我尝试了许多位置、宽度和高度的组合，但通常情况下，无论我为宽度/高度设置了多少百分比，布局都有自己的想法

---

应该提到的是，我同时使用MVC和Twitter引导，所以我的html可能会受到影响。有人能帮我修复我的html，让它通过动态调整大小复制上面的设计吗

出于布局目的，最好使用

元素而不是表格。检查此项，了解其背后的原因

因为您使用的是Twitter引导，所以最好的选择是使用引导的优秀（和核心）功能

下面是使用Bootstrap 2.3的快速设置：

<div class="row">
    <div class="span3">
        <div class="row">
            <div class="span12">
                <div id="chartdiv1" ></div>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <div id="chartdiv2" ></div>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <div id="chartdiv3" ></div>
            </div>
        </div>
    </div>
    <div class="span9">
       <div id="Simulation" ></div>
    </div>
</div>

或使用Bootstrap 3 RC1：

<div class="row">
    <div class="col-lg-3">
        <div class="row">
            <div class="col-lg-12">
                <div id="chartdiv1" ></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="chartdiv2" ></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div id="chartdiv3" ></div>
            </div>
        </div>
    </div>
    <div class="col-lg-9">
       <div id="Simulation" ></div>
    </div>

</div>

好的，我也试过了，网格系统的问题是我的第二列跨越了3行。。。我的标签div需要和我的模拟div在同一个单元格中，在网格中有这样做的方法吗？最重要的是，我在调整大小方面仍然有类似的问题，当我把控制图的高度降为“33%”时，它们都会超过页面的大小。检查我的编辑，这会让你走上正确的轨道。请记住，每行包含12列，即使它的宽度较小，这就是为什么我为3个子行创建了一个12列的大div，它跨越布局左侧3列中包含的整行。编辑：添加并澄清更多布局。啊，非常感谢！这看起来确实有点混乱，你能告诉我在这个div布局中我将在哪里插入我当前的div吗？没关系，你又在我前面编辑了，哈哈，我会试试的，谢谢！