设置宽度50%、外边距0px后元素无法对齐的问题求助

问题根源 #

• 你给.editor和.render-area都设了width:50%，但canvas带有2px边框，再加上margin-right:10px，会让右侧div的实际宽度超出50%，直接导致换行。
• canvas的float:right完全没必要，反而会打乱父容器的正常布局。
• 没处理浮动元素的清除，父容器会出现高度塌陷，进一步影响布局稳定性。

修改后的代码 #

CSS 部分

html, body {
    margin: 0px;
    margin-top: 5vh;
}

.wrapper {
    margin: 0px;
    /* 清除浮动，解决父容器高度塌陷 */
    overflow: hidden;
}

.header {
    position: fixed;
    padding: 1px;
    width: 100%;
    top: 0;    
    padding-left: 12px;
    background: lightcoral;
    /* 避免padding撑宽header */
    box-sizing: border-box;
}

/* 统一设置两个并排容器的样式 */
.editor, .render-area {
    width: 50%;
    float: left;
    /* 让边框、内边距计入宽度，避免溢出 */
    box-sizing: border-box;
    margin: 0px;
}

.editor {
    padding: 0 10px;
}

canvas {
    border: 2px solid black;
    /* 移除多余的float:right */
    margin-right: 10px;
}

HTML 部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render | Js</title>

    <link rel="stylesheet" href="media/global.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <h3>Render | Js</h3>
        </div>

        <div class="editor">
            <p id="postion-display"></p>
        </div>
        <div class="render-area">
            <canvas width="500" height="500" id="render"></canvas>
        </div>
    </div>

    <script src="./src/render.js"></script>
</body>
</html>

关键修改说明 #

1. box-sizing: border-box：给所有涉及宽度计算的元素加上这个属性，让边框、内边距都包含在设定的宽度里，彻底解决宽度溢出问题。
2. 移除canvas的float:right：取消这个浮动后，canvas会留在父容器内，保证.render-area能正常占据50%宽度，和左侧.editor对齐。
3. 统一管理并排容器样式：把.editor和.render-area的宽度、浮动样式合并到CSS中，避免内联样式的混乱。
4. 清除浮动：给.wrapper加overflow:hidden，解决子元素浮动导致的父容器高度塌陷。

修改完成后，鼠标坐标显示区域和canvas容器就能稳定并排，不会再出现错位或换行的情况。

内容的提问来源于stack exchange，提问作者user23517752