Question

我正在尝试编写Web应用程序。从本质上讲，整个网页应该在左边填充一个画布，在右边填充一个侧边栏。这是我的代码：

<html>
<head>
    <title>Qubit Simulator</title>
    <style>
        body{
            margin:0px;
            overflow: hidden;
        }

        canvas {
            height: 100%;
            width: 80%;
            margin: 0px;
            margin-left: 0px;
            margin-right: auto;
        }

        #sidebar{
            height:100%;
            width:30%;
            margin-left:auto;
            margin-right:0px;
            background: #00FFFF;
        }
    </style>
</head>


<body>
<canvas id="canvas">
    Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
</canvas>
<div id="sidebar"></div>
...
</body>
</html>

这就是显示的内容：

enter image description here

显然，边栏根本没有出来。更糟糕的是，尽管代码中有明确的指示，但画布并没有填满100％的垂直空间。

这是我第一次做HTML / CSS，所以我经历了巨大的范式转换（来自.NET GUI和Android编程）。任何帮助将不胜感激。如果你发现它很奇怪，也请对代码的任何其他部分提出批评。谢谢！

Answer 1

试试这个

<style>
    body{
        margin:0px;
        overflow: hidden;
    }

    canvas {
        height: 100%;
        width: 80%;
        margin: 0px;
        margin-left: 0px;
        margin-right: auto;
        float:left;
        background: #000;
    }

    #sidebar{
        height:100%;
        width:30%;
        margin-left:auto;
        margin-right:0px;
        background: #00FFFF;            
    }
</style>

我添加的是浮动：留给画布。侧边栏和画布的高度很棘手，但看起来不好看。你希望它一直走下去吗？

Answer 2

我看到的一些问题：

<canvas id="canvas"> - 不确定这是什么。不应该是<div id="canvas">，然后在</div>

中关闭

另外，在你的CSS中，你错过了需要在'canvas'前面的＃。

此外，如果您想要左侧的画布和右侧的侧边栏，请将float:left;添加到画布，将float:right;添加到CSS中的侧边栏。

画布旁边的水平侧边栏

2 个答案: