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仍然有問題

回答

相關問題