我搜索过这个站点,似乎动态调整组件大小的最佳方法是通过 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 以便它复制上面的动态大小设计吗?
最佳答案
最好用<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>
关于html - 使用 CSS 动态调整表格中的 div 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18131366/