基本会见团队页面答案

【问题标题】：Basic meet the team page基本会见团队页面
【发布时间】：2017-10-10 22:43:31
【问题描述】：

如何使“关于”框向下移动，与“电子邮件”框平齐。我尝试使用 height="something" 但它向上移动而不是向下移动，所以它弄乱了我的页面。

所以基本上我希望“关于”框与“照片、电子邮件、Whatsapp 等”框的大小相同。高度。

代码：

<!DOCTYPE html>
<html>
<head>
<body>
  <canvas id="Photo" width="200" height="230" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    var canvas = document.getElementById("Photo");
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Photo Here",20,110);
  </script>
  <canvas id="About" width="500" height="230" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas><br>
  <script>
    var canvas = document.getElementById("About");
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("About Page",150,110);
  </script>
  <canvas id="Real_Name" width="200" height="30" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    var canvas = document.getElementById("Real_Name");
    var ctx = canvas.getContext("2d");
    ctx.font = "15px Arial";
    ctx.fillText("Real Name",60,20);
  </script><br>
  <canvas id="Role" width="200" height="30" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    var canvas = document.getElementById("Role");
    var ctx = canvas.getContext("2d");
    ctx.font = "15px Arial";
    ctx.fillText("Role",81,20);
  </script><br>
  <canvas id="WhatsApp" width="200" height="30" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas><br>
  <script>
    var canvas = document.getElementById("WhatsApp");
    var ctx = canvas.getContext("2d");
    ctx.font = "15px Arial";
    ctx.fillText("WhatsApp",60,20);
  </script>
  <canvas id="Email" width="200" height="30" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    var canvas = document.getElementById("Email");
    var ctx = canvas.getContext("2d");
    ctx.font = "15px Arial";
    ctx.fillText("Email",77,20);
  </script>

</body>
</html>

【问题讨论】：

我建议做一个基本的 html / css 教程，因为使用画布制作带有文本的简单框在渲染性能方面效率不高，如果您不知道如何在旁边放置框等简单的事情彼此，你会真正受益于一点知识
你推荐什么教程？ @皮特
进行搜索，有数百个不错的 - 取决于您以及您认为易于使用的内容

标签： css html canvas

【解决方案1】：

尺寸不匹配的原因是您在 /canvas 之后错过了一个 BR 标签，表示“关于” - 所以应该是：

   <canvas id="About" width="200" height="30" style="border:1px solid #000000;">
   Your browser does not support the HTML5 canvas tag.
   </canvas> <br>
   <script>

然后你将把它们都排成一排。

你还需要正确关闭你的标题和HTML标签，所以在底部

 </body>
</head>
</html>

当然，如果您想将所有这些内容放在标题中。

这是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id="Photo" width="200" height="230" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("Photo");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Photo Here",20,110);
</script><br>
<canvas id="About" width="200" height="230" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas><br>
<script>
var canvas = document.getElementById("About");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("About Page",150,110);
</script><br>
<canvas id="Real_Name" width="200" height="30" style="border:1px solid #000000;"><br>
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>    var canvas = document.getElementById("Real_Name");
var ctx = canvas.getContext("2d");
ctx.font = "15px Arial";
ctx.fillText("Real Name",60,20);
</script><br>
<canvas id="Role" width="200" height="30" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("Role");
var ctx = canvas.getContext("2d");
ctx.font = "15px Arial";
ctx.fillText("Role",81,20);
</script><br>
<canvas id="WhatsApp" width="200" height="30" style="border:1px solid #000000;">    
Your browser does not support the HTML5 canvas tag.
</canvas><br>
<script>
var canvas = document.getElementById("WhatsApp");
var ctx = canvas.getContext("2d");
ctx.font = "15px Arial";
ctx.fillText("WhatsApp",60,20);
</script>
<canvas id="Email" width="200" height="30" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("Email");
var ctx = canvas.getContext("2d");
ctx.font = "15px Arial";
ctx.fillText("Email",77,20);
</script>

</body>
</head>
</html>

【讨论】：

是一样的。
如果您已将每个画布条目的宽度更改为所有相同的值，那么它将正确显示，尽管您可以使用 CSS 设置样式以节省您必须将宽度更改五次。
很难解释，但我希望“关于”框与“照片、电子邮件、Whatsapp 等”框的大小相同。在高度。我不知道怎么解释。
好的，你只需要将高度更改为所有相同的值，所以：
这不是我想要做的。我正在尝试将名为“关于”的框的底部栏向下移动。所以它可以与名为“Email”的框的底线对齐。