基本会见团队页面

如何使“关于”框向下移动，即使是“电子邮件”框。我试着用高度=“东西”，但它向上移动不下来，所以它弄乱了我的页面。基本会见团队页面

所以基本上我想“关于”框与框中的“照片，电子邮件，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>

来源

2017-10-10 Antonio Moratti

我建议做一个基本的HTML/CSS教程的制作简单盒用文字使用的画布是不是在表现呈现非常有效的，如果你不”要知道一个简单的事情，比如如何把盒子放在一起，你会从一点知识中受益 – Pete

你推荐什么样的教程？ @Pete –

做一个搜索，有好几百个好的 - 这取决于你，你发现易于使用 – Pete

的原因大小不匹配的是，你错过了关闭/帆布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>

来源

2017-10-10 13:16:43

这是一回事。 –

如果您已将宽度更改为每个画布条目的所有相同值，那么它将正确显示，尽管您可以使用CSS设置样式以避免不得不五次更改宽度。 –

很难解释，但是，我希望“关于”框的大小与“照片，电子邮件，WhatsApp等”框相同。身高。我不知道如何解释。 –

基本会见团队页面

回答

相关问题