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

Question

我已经搜索过这个站点，似乎动态调整组件大小的最佳方法是通过 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>

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

应该提一下，我同时使用了 MVC 和 Twitter Bootstrap，所以我的 html 可能受此影响。有人可以帮我修复我的 html，以便它通过动态大小复制上面的设计吗？

Answer 1

为了布局目的，最好使用<div> 元素而不是表格。检查此SO Post 了解其背后的原因。

由于您使用的是 Twitter Bootstrap，因此您最好的选择是使用 Bootstrap 的出色（和核心功能）grid system。

这是使用 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>