求助：Ace/CodeMirror双代码编辑器无法并排显示的问题

嘿，我一眼就看出问题出在哪了！你给两个编辑器都加了position: absolute; top: 0; right: 0; bottom: 0; left: 0;，这会让它们直接脱离文档流，整个占满浏览器视口，后面的编辑器把前面的完全覆盖，自然只能看到一个。

下面是修复方案，不管用Ace还是CodeMirror都适用：

1. 修正CSS布局 #

首先删掉编辑器的绝对定位样式，改用Grid子容器来控制尺寸，让编辑器自适应父容器空间：

/* 全局样式重置，避免默认margin/padding干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; /* 给两个编辑器之间加个间距，视觉更清晰 */
  height: 100vh; /* 让Grid容器占满整个视口高度 */
  padding: 1rem; /* 加内边距，避免编辑器贴紧浏览器边缘 */
}

.child {
  height: 100%; /* 子容器继承Grid容器的高度 */
  border: 1px solid #ccc; /* 可选：加边框区分两个编辑器区域 */
}

/* 让编辑器占满子容器的全部空间 */
#editor, #editor2 {
  height: 100%;
  width: 100%;
}

2. 完整可运行代码 #

把修正后的CSS和你的HTML整合起来，就是这样：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Product App</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .grid-parent {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            height: 100vh;
            padding: 1rem;
        }

        .child {
            height: 100%;
            border: 1px solid #ccc;
        }

        #editor, #editor2 {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class='grid-parent'>
        <div class='child'>
            <div id="editor">
function foo(items) { var x = "All this is syntax highlighted"; return x; }
            </div>
        </div>
        <div class='child'>
            <div id="editor2">
function foo(items) { var x = "This is the second editor's independent content"; return x; }
            </div>
        </div>
    </div>

    <script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");

        var editor2 = ace.edit("editor2");
        editor2.setTheme("ace/theme/monokai");
        editor2.session.setMode("ace/mode/javascript");
    </script>
</body>
</html>

3. 关于后续添加菜单的说明 #

等你搞定并排显示后，要加菜单的话，直接在.grid-parent外面或内部插入菜单元素即可。比如在顶部加个导航栏：

<!-- 顶部菜单 -->
<nav style="height: 60px; background: #333; color: white; padding: 0 1rem; display: flex; align-items: center;">
    <h1>Product App</h1>
</nav>
<!-- 调整Grid容器高度，避开菜单区域 -->
<div class='grid-parent' style="height: calc(100vh - 60px);">
    <!-- 编辑器内容不变 -->
</div>

这样菜单和编辑器区域会上下布局，完全不影响两个编辑器的并排效果。

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