<分区>
<分区>
我有一个 Canvas 和一个边 div，我正在使用 display:inline-block; 并排显示它们。但它不起作用。侧面 div 顶部有一些空白区域。这是 jsfiddle .
我知道我可以通过提供 absolute 位置来实现它，但如果有人能帮助我理解为什么这是错误的，那就太好了。
这是我的代码:
HTML
<div class="mainDiv" >
<div class="sidebarDiv" >
HEY
</div>
<div class="canvasDiv">
<canvas #canvas id="canvas"></canvas>
</div>
</div>
CSS
.mainDiv{
height: 100vh;
}
.canvasDiv{
width: calc(100% - 75px);
display: inline-block;
}
.sidebarDiv{
display: inline-block;
background: red;
width: 50px;
height: 100%;
}
#canvas {
background: blue;;
width: inherit;
height: 100% !important;
}
最佳答案
只需在您的 inline-block div 中添加一个 float: left。
.mainDiv{
height: 100vh;
}
.canvasDiv{
float: left;
width: calc(100% - 75px);
display: inline-block;
}
.sidebarDiv{
float: left;
display: inline-block;
background: red;
width: 50px;
height: 100%;
}
#canvas {
background: blue;;
width: inherit;
height: 100% !important;
} <div class="mainDiv" >
<div class="sidebarDiv" >
HEY
</div>
<div class="canvasDiv">
<canvas id="canvas"></canvas>
</div>
</div>关于html - 内联显示不适用于 Canvas 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53286721/