Question

我对HTML和CSS感到沮丧。

基本上，我试图建立一个像

这样的布局的网站

问题是，左边的div有一个很大的边距，它取代了画布并且发生了。

我已经尝试了各种解决方案，其中包含一些问题，以及它们造成的问题：

将div的显示设置为内联块。这使得div完全由于某种原因而消失，并使其内容出现在画布的右侧。（至少它将画布向上移动）。我必须指出，内容实际上并不可见。 Ctrl + Shift + 我说他们在那里。

将div更改为内联组件（span）。没有区别。

我试过了margin: 0px;。这根本没有改变。 margin-left and margin-right自动将div居中，并且没有移动画布。

我尝试为div设置手动width/height值。没有区别。

我认为有些解决方案可能有用，但我不愿意尝试。

我可以制作一张桌子并将元素添加到其中，但我听说这是不好的做法，并希望避免它。

我可以手动设置位置，但我担心它们可能会在设备和分辨率之间发生变化。

我有点不知所措。我是一个HTML和布局的初学者，所以请原谅我，如果它真的很明显，我很遗憾。

感谢您的帮助。

Answer 1

这并不是真正“缩小”你所追求的。但是因为我不知道你叫什么div和画布，我会给你一般的解决方案。 - ＆GT; https://www.w3schools.com/css/css_float.asp 所以基本上尝试添加这个：

div, canvas {
  float: left;
}

假设您的div和画布为<div></div>和<canvas></canvas>，并且您尚未向其中任何一个添加position: fixed;或position: absolute;。