如何将 <div id= "height" >输出显示在矩形的高度上？

我在做什么

我正在使用HTML、CSS和JavaScript创建一个图片框架计算器。

计算器解决的问题

以下是示例用户输入：

Frame Width (wf):  16
Frame Height (hf):  20 
Picture Width (wp): 11 
Picture Height (hp): 17
Mat Overlap (o): .25

我的计算器的方程式是：

Width=(1 / 2) * (hf - hp + o)=1.625，相当于<div id="width">
Height＝(1 / 2) * (wf - wp + o)＝2.625，相当于<div id="height">

代码

* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}

/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width: P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}

/* Labels */
label {
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}

/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"],
input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}

/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#dvemail {
display: none;
}
#chkYes:checked~#dvemail {
display: block;
}

/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}

/* Large screen rules */
@media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>

<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value
var hf = document.getElementById('hf').value
var wp = document.getElementById('wp').value
var hp = document.getElementById('hp').value
var o = document.getElementById('o').value
var width = (1 / 2) * (hf - hp + o);
var height = (1 / 2) * (wf - wp + o);
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;
}
</script>
<center>
<div style="width:300px;height:300px;border:1px solid #000;">
<center>
<div id="width"><div id="height"></div></div>
</center>
</div>
</center>
</body>
</html>

问题&我尝试过的

我的代码能够在生成的矩形上显示Width，即<div id="width">。但是，我不能显示Height，它是<div id="height">。以下是有问题的代码部分：

<center><div style="width:300px;height:400px;border:1px solid #000;"><center><div id="width"><div id="height"></div></center></div></center>

我的问题

如何显示<div id="height">，如图所示：高度的放置？在图像中，1.625是<div id="width">的计算和正确放置

我终于找到了以下问题的解决方案：

如何显示如图所示，"切割高度"、"切割宽度"的位置已包含在内。

我在矩形中添加了一个id为height的div：

<center>
<div style="width:200px;height:300px;border:1px solid #000;">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>

然后这个附带的CSS:

#height {
text-align: left;
margin-top: 130px;
margin-left: 4px;
}

首先，我将文本对齐到矩形的左侧
然后，我将矩形向下移动了130像素，大约是300像素高的框的一半(我没有放150像素，正好是一半，因为在顶部添加边距会增加文本上方的空间。如果框的顶部从顶部向下移动了150像素，它看起来就不会居中，因为文本的顶部会居中。更多的是关注130像素，直到它看起来正确(
最后，我在左边加了4倍的边距，这样文本就不会离左边太近，看起来也不那么局促了

* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}

/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width: P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}

/* Labels */
label {
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}

/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"],
input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}

/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#height {
text-align: left;
margin-top: 150px;
margin-left: 4px;
}

/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}

/* Large screen rules */
@media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>

<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>

<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value

var hf = document.getElementById('hf').value

var wp = document.getElementById('wp').value

var hp = document.getElementById('hp').value

var o = document.getElementById('o').value

var width = (1/2)*(hf-hp+o);
var height = (1/2)*(wf-wp+o);
document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;

}
</script>

<center>
<div style="width:400px;height:500px;border:2px solid #000; margin-top: 30px; margin-bottom: 30px;">
<center>
<div id="width"></div>
</center>

<div id="height"></div>
</div>
</center>

</body>
</html>

现在，根据相框计算器的输入，计算出的数字显示在形状的宽度和高度部分的矩形上。

小数到分数-可选

编辑：我进行了更多的研究，所以我希望你觉得这很有价值。我发现了一种以小数形式显示输出的方法。

分数的第一次编辑

要在上面的HTML代码中实现这一点：

查找：

<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>

添加后：

<script src="https://unpkg.com/fractional@1.0.0/index.js"></script>

我发现了一个名为fraction.js的库。所以你可以通过unpkg.com网站加载fraction.js。

分数的第二次编辑

查找：

document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;

替换为：

document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();

你会注意到，我写的不是width，而是new Fraction(width).toString()。这就是图书馆的文档告诉我要做的，以便使用他们的图书馆(将小数转换为分数(。