Question

我要做的是让蛋白质和水在右侧一个在另一个上面。

然后我想在左侧对齐，标签体脂肪，瘦身体质量，每日进水量和每日蛋白质摄入量。

最后，我想在主div的右侧对齐另一个div，向用户显示指令。

我从早上6点起就开始研究这个问题并尽我所能。我调整了一些东西，它打破了别的东西。请帮忙。

堆栈溢出答案是将整个事物放入表中。所以我这样做了，现在计算不再有效了？

Kosimides Lean身体学院计算器计算器

body
{
    background:#504E4F;
}

main
{
    border:2px solid #504E4F;
    padding:10px 10px;
    background:#F4C62F;
    width:300px;
    border-radius:20px;
    box-shadow: 10px 10px 2px #CCC;
    text-align: center;
    margin-right:auto;
    margin-left:auto;
}


h1
{
    color:#9F9D9E
    text-align:center;
}

</style>
</head>

<body>


    <main>
    <form>
        <h1>LBA Calculator</h1>
        <br />
        <label> Weight
                <input type="text" name="weight" id="weight" size="5" /> (lbs)
        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label> Body Fat
                <input type="text" name="bodyfat" id="bodyfat" size="3" /> (%)
        </label>
        <br />
        <br />
         <label> Protein
                <input type="text" name="protein" id="protein" size="3" />
        </label>
        <br />
         <label> Water
                <input type="text" name="water" id="water" size="3" />
        </label>
        <br />
        <br />
         <label> Pounds of Body Fat
                <input type="text" name="lbf" id="lbf" size="3" /> (lbs)
        </label>
        <br />
        <label> Lean Body Mass
                <input type="text" name="lbm" id="lbm" size="3" /> (lbs)
        </label>
        <br />
        <label> Daily Water Intake
                <input type="text" name="dwi" id="dwi" size="3" /> (ounces)
        </label>
        <br />
        <label> Daily Protein Intake
                <input type="text" name="dpi" id="dpi" size="3" /> (grams)
        </label>
        <br />
        <input type="button" name="Calculate" value="Calculate" onClick="LBAcalc()" />
        <input type="reset" name="Reset" value="Reset" />
    </form>
    </main>


    <script>

        function LBAcalc()
        {


                 // Get The Input

                var w_txt = document.getElementById('weight');
                var bf_txt = document.getElementById('bodyfat');
                var p_txt = document.getElementById('protein');
                var wtr_txt = document.getElementById('water');


                 // Convert To Numbers If Needed

                var w = parseInt(w_txt.value);
                var bf = parseInt(bf_txt.value);
                var p = parseFloat(p_txt.value);
                var wtr = parseFloat(wtr_txt.value);


                // Convert body fat to percentage

                bf = bf / 100

                // Process and Display Results

                var result = document.getElementById ('lbf');
                var myResult = w * bf;
                result.value = myResult.toFixed(0);

                var result1 = document.getElementById ('lbm');
                var myResult1 = w - myResult;
                result1.value = myResult1.toFixed(0);

                var result2 = document.getElementById ('dwi');
                var myResult2 = myResult1 * wtr;
                result2.value = myResult2.toFixed(0);

                var result3 = document.getElementById ('dpi');
                var myResult3 = myResult1 * p;
                result3.value = myResult3.toFixed(0);


        }



    </script>

这最初是一个Excel电子表格，如此处所示。

Original Excel Image

这是我想要完成的事情的模拟。

Mock Up

Answer 1

您可以使用具有浮点数和/或固定宽度的div以及内联块的显示，但有时候表格是完全可以接受的......这对我来说似乎是其中一种情况：

<table>
  <tr>
    <td class="key"><label for="weight">Weight:</label></td>
    <td class="val"><input id="weight" name="weight"/> (lbs)</td>
    <td class="howto" rowspan="8">
      Some instructions go here.
    </td>
  </tr>
  <tr>
    <td class="key"><label for="bodyFat">Body Fat:</label></td>
    <td class="val"><input id="bodyFat" name="bodyFat"/></td>
  </tr>
   ....

https://jsfiddle.net/hr6oas9j/

div中的CSS对齐仍然存在问题

1 个答案: