CSS对齐内div仍然有问题

我想要做的是蛋白质和水在另一个右上方对齐。CSS对齐内div仍然有问题

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

最后，我想另一个div对齐主要div的右侧，它会向用户显示说明。

我一直在努力从早上6点开始努力。我调整了一些东西，并打破了别的东西。请帮忙。

堆栈溢出的答案是把整个事情放到一个表中。所以我这样做了，现在计算不再起作用了？

博士Kosimides瘦体院计算器

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

来源

2016-05-05 Christopher Gagnon

附加样机图像将使其比较容易的方式看你想要什么 –

@ChrisCurtis我为你添加了一个模型:)谢谢 –

你可以使用的div花车和/或固定宽度和inline-block的显示，但有时如表格是完全可以接受的......这似乎是这些情况给我一个：

<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/

来源

2016-05-05 17:30:25

CSS对齐内div仍然有问题

回答

相关问题