如何解决保持两个画布并排并改变纵横比
我试图在 Chrome 上并排显示两个画布（左侧为 gameScreen，右侧为 scoreScreen）。无论屏幕尺寸/纵横比如何，我都希望这些画布并排放置。下面是我的 HTML 和 CSS：
HTML：
<body>
<canvas id="gameScreen" width="600" height="600"></canvas>
<canvas id="scoreScreen" width="300" height="600"> </canvas>
</body>
CSS：
#gameScreen {
border: 1px solid black;
}
/* #scoreScreen {
border: 1px solid black;
} */
html,body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
这适用于 1024x600 大小的屏幕，但随着屏幕尺寸越来越大，左侧画布（游戏屏幕）开始与右侧画布重叠。我试图用 div 标签包裹两个画布，并为 div 标签分配一个相对位置，但是，我无法让它工作。
解决方法
使用标签父灵活性规则<canvas>。添加 display: flex 和规则 gap 以省略 <body> 标签。
<canvas> 标签将始终并排。
html,body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
/*display: table-cell;
vertical-align: middle;*/
display: flex;
gap: 8px;
}
#gameScreen {
border: 1px solid black;
}
#scoreScreen {
border: 1px solid black;
}<body>
<canvas id="gameScreen" width="600" height="600"></canvas>
<canvas id="scoreScreen" width="300" height="600"> </canvas>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。