我有2个表，其ID为“ =“ BFCategories”和“ BMICategories”。
我还有其他2个表，它们的ID为“ =“ BFTable”和“ BMITable”
BFCategories低于BFTable，BMICategories低于BMITable。
我如何移动BFCategories和BMICategories，以便可以将它们放置在BFTable和BMITable的右侧？
这是我视图的HTML，我正在使用asp.net MVC5：
<h1>Calculate</h1>
<hr />
<h2>BMI</h2>
<form>
<table id="BMITable">
<tr>
<td align="right"><b>Weight:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Weight" class="form-control" id="Weight" /></div><b>kg</b></td>
</tr>
<tr>
<td align="right"><b>Height:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" id="Height" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>BMI:</b></td>
<td align="left"><div class="col-xs-4"><input type="text" name="BMI" class="form-control" id="BMIBox" /></div></td>
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Calculate" class="btn btn-default" id="CalculateBMI" />
</div>
</div>
<table id="BMICategories">
<p>
<b>Underweight</b> = <18.5<br>
<b>Normal weight</b> = 18.5–24.9 <br>
<b>Overweight</b> = 25–29.9 <br>
<b>Obesity</b> = BMI of 30 or greater
</p>
</table>
</form>
<hr />
<h2>BF% (aproximated)</h2>
<p>(All the measurements must be taken at the narrowest point)</p>
<form>
<table id="BFTable">
<tr>
<td><b>Male</b></td>
<td><input type="radio" name="gender" id="male" /><b> Female</b><input type="radio" name="gender" id="female" /></td>
</tr>
<tr>
<td align="right"><b>Height:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" id="height2" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Waist:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Waist" class="form-control" id="waist" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Hip:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Hip" class="form-control" id="hip" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Neck:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Neck" class="form-control" id="neck" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>BF%:</b></td>
<td align="left"><div class="col-xs-4"><input type="text" name="BF%" class="form-control" id="bf" /></div><b>%</b></td>
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Calculate" class="btn btn-default" id="CalculateBF">
</div>
</div>
<table class="cinfoT" width="320" align="left" id="BFCategories">
<tr><td class="cinfoHd"><b>Description</b></td><td class="cinfoHdL"><b>Women</b></td><td class="cinfoHdL"><b>Men</b></td></tr>
<tr><td><b>Recommended amount</b></td><td class="cinfoBodL">20-25%</td><td class="cinfoBodL">8-14%</td></tr>
<tr><td><b>Average</b></td><td class="cinfoBodL">22-25%</td><td class="cinfoBodL">15-19%</td></tr>
<tr><td><b>Obese</b></td><td class="cinfoBodL">30+%</td><td class="cinfoBodL">25+%</td></tr>
</table>
</form>
最佳答案
嘿，现在您可以按照我的方式做，但是请看一下bootstrap文档，因为您已经添加了引导程序代码，但您不知道，这将在以后的几天中帮助您改善设计。
table {
width: 50%;
float: left;
}<h1>Calculate</h1>
<hr />
<h2>BMI</h2>
<form>
<table id="BMITable">
<tr>
<td align="right"><b>Weight:</b></td>
<td align="left"><input type="text" name="Weight" class="form-control" id="Weight" /><b>kg</b></td>
</tr>
<tr>
<td align="right"><b>Height:</b></td>
<td align="left"><input type="text" name="Height" class="form-control" id="Height" /><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>BMI:</b></td>
<td align="left"><input type="text" name="BMI" class="form-control" id="BMIBox" /></td>
</tr>
<tr>
<td colspan='2'>
<input type="button" value="Calculate" class="btn btn-default" id="CalculateBMI" /></td>
</tr>
</table>
<table id="BMICategories">
<p>
<b>Underweight</b> = <18.5<br>
<b>Normal weight</b> = 18.5–24.9 <br>
<b>Overweight</b> = 25–29.9 <br>
<b>Obesity</b> = BMI of 30 or greater
</p>
</table>
</form>
<hr />
<h2>BF% (aproximated)</h2>
<p>(All the measurements must be taken at the narrowest point)</p>
<form>
<table id="BFTable">
<tr>
<td><b>Male</b></td>
<td><input type="radio" name="gender" id="male" /><b> Female</b><input type="radio" name="gender" id="female" /></td>
</tr>
<tr>
<td align="right"><b>Height:</b></td>
<td align="left"><input type="text" name="Height" class="form-control" id="height2" /><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Waist:</b></td>
<td align="left"><input type="text" name="Waist" class="form-control" id="waist" /><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Hip:</b></td>
<td align="left"><input type="text" name="Hip" class="form-control" id="hip" /><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Neck:</b></td>
<td align="left"><input type="text" name="Neck" class="form-control" id="neck" /><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>BF%:</b></td>
<td align="left"><input type="text" name="BF%" class="form-control" id="bf" /><b>%</b></td>
</tr>
<tr>
<td colspan='2'>
<input type="button" value="Calculate" class="btn btn-default" id="CalculateBF"></td>
</tr>
</table>
<table class="cinfoT" width="320" align="left" id="BFCategories">
<tr><td class="cinfoHd"><b>Description</b></td><td class="cinfoHdL"><b>Women</b></td><td class="cinfoHdL"><b>Men</b></td></tr>
<tr><td><b>Recommended amount</b></td><td class="cinfoBodL">20-25%</td><td class="cinfoBodL">8-14%</td></tr>
<tr><td><b>Average</b></td><td class="cinfoBodL">22-25%</td><td class="cinfoBodL">15-19%</td></tr>
<tr><td><b>Obese</b></td><td class="cinfoBodL">30+%</td><td class="cinfoBodL">25+%</td></tr>
</table>
</form>