Question

我想制作一个程序，根据另外两个矩阵找到直角矩形的第三面。我的想法是绘制一个三角形，并将输入框放在三个不同的边旁边。但是我很难让它们粘在两侧（当你放大时它们移动）。这是代码：

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
   <head> 
        <title>Triangle rectangle</title>
        <style>
            .triangle {
                position: relative;
                text-align: center;
            }
        </style>
   </head>
   <body align="center">      
        <h2> Triangle rectangle </h2>
        <div class="triangle">
            <form autocomplete="off">
                <input style="position: absolute; top: 50%; right: 65%; width: 3%" type="text" name="a" id="a" placeholder='a' >
                <input style="position: absolute; top: 260px; right: 950px; width: 3%" type="text" name="b" id="b" autofocus='on' placeholder='b' >
                <input style="position: absolute; top: 100px; right: 850px; width: 5%" type="text" name="hypo" id="hypo" placeholder='Hypothénuse' >
            </form> 
            <canvas id="myCanvas" width="500" height="250" >Your browser does not support the HTML5 canvas tag.</canvas>
        </div>

        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(500, 250);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, 250);
            ctx.moveTo(0, 250);
            ctx.lineTo(500, 250);
            ctx.stroke();
        </script>
   </body>
</html>

这是一个代码为http://rightangledrectangleirl.bitballoon.com/

的网站

编辑：管理以修复它：

<div style="position:relative; width:500px;height:250px; margin: 0 auto;" align="center">
    <canvas id="myCanvas" width="500" height="250">Your browser does not support the HTML5 canvas tag.</canvas>
    <form autocomplete="off">
        <input style="position: absolute; top: 125px; left: 10px; width: 50px" type="text" name="a" id="a" autofocus='on' placeholder='a' >
        <input style="position: absolute; top: 220px; right: 180px; width: 50px" type="text" name="b" id="b" autofocus='on' placeholder='b' >
        <input style="position: absolute; top: 90px; right: 90px; width: 80px" type="text" name="hypo" id="hypo" autofocus='on' placeholder='Hypothénuse' >
    </form>     
</div>

Answer 1

绝对定位相对于明确定义了position属性的最后一个容器起作用。在这种情况下，triangle div具有position:relative，因此输入框将相对于此绝对定位。

考虑到这一点，重要的是要注意当页面大小发生变化时，triangle div的大小也会发生变化，因此绝对定位也会发生变化。为了解决这个问题，您应该为triangle容器提供固定大小（或至少是可预测的容器）。使其与画布的大小相匹配似乎是一个不错的选择。

不幸的是，给它一个固定的大小会让你以水平方向中心的方式，但可以使用margin : auto来解决这个问题。

最后，您应该重做top, left, bottom, right百分比。请记住，您也可以使用像素。我不确切知道你想要物品的位置，但是下面的代码可能会让你走上正轨：

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 250);
ctx.moveTo(0, 0);
ctx.lineTo(0, 250);
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.stroke();

＆＃13;

.triangle {
  position: relative;
  text-align: center;
  width : 500px;
  height : 250px;
  margin : auto;
}

#a {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 3%;
}

#b {
  position: absolute;
  bottom: 0px;
  right: 50%;
  width: 3%
}

#hypo {
  position: absolute;
  top: 45%;
  left: 40%;
  width: 100px;
}

＆＃13;

<body align="center">
  <h2> Triangle rectangle </h2>
  <div class="triangle">
    <form autocomplete="off">
      <input type="text" name="a" id="a" placeholder='a'>
      <input type="text" name="b" id="b" autofocus='on' placeholder='b'>
      <input type="text" name="hypo" id="hypo" placeholder='Hypothénuse'>
    </form>
    <canvas id="myCanvas" width="500" height="250">Your browser does not support the HTML5 canvas tag.</canvas>
  </div>
</body>

＆＃13;

Answer 2

问题是你的.triangle div没有设定的宽度或高度：

.triangle {
    position: relative;
    text-align: center;
    width: 500px;
    height: 250px;
    margin: 0 auto;
}
.h {
    position: absolute;
    top: 120px;
    right: 100px;
    width: 100px;
  }
.b {
    position: absolute;
    bottom: -35px;
    left: 210px;
    width: 50px;
  }
.a {
  position: absolute;
    top: 120px;
    left: -70px;
    width: 50px;
  }

<h2> Triangle rectangle </h2>
<div class="triangle">
    <form autocomplete="off">
        <input class="a" type="text" name="a" id="a" placeholder='a' >
        <input class="b" type="text" name="b" id="b" autofocus='on' placeholder='b' >
        <input class="h" type="text" name="hypo" id="hypo" placeholder='Hypothénuse' >
    </form> 
    <canvas id="myCanvas" width="500" height="250" >Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 250);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 250);
    ctx.moveTo(0, 250);
    ctx.lineTo(500, 250);
    ctx.stroke();
</script>

在画布上发出定位输入

2 个答案: