html - 将表格与其他表格的右侧对齐

Question

• 我有 2 个表，其中包含 id="BFCategories" 和 "BMICategories"。

• 我还有另外 2 个表，分别是 id="BFTable" 和 "BMITable"

• BFCategories 在 BFTable 之下，BMICategories 在 BMITable 下面。

如何移动 BFCategories 和 BMICategories 以便将它们放置到 BFTable 和 BMITable 的右侧？，如下图所示:

这是我的 View 的 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> = &lt;18.5<br>
            <b>Normal weight</b> = 18.5&ndash;24.9 <br>
            <b>Overweight</b> = 25&ndash;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>

Answer 1

嘿现在你可以按照我的方式做但是看看bootstrap文档，因为您已经添加了 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> = &lt;18.5<br>
                <b>Normal weight</b> = 18.5&ndash;24.9 <br>
                <b>Overweight</b> = 25&ndash;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>