调整位置试一下

web/demoset.php

@@ -0,0 +1,55 @@
+<?php $show_title = "$MSG_PROBLEMS - $OJ_NAME"; ?>
+<?php include("template/$OJ_TEMPLATE/header.php"); ?>
+<div class="padding">
+
+<script type="text/javascript" src="include/react/react.min.js"></script>
+<script type="text/javascript" src="include/react/react-dom.min.js"></script>
+
+<?php
+// 遍历demos文件夹下的所有php文件
+$directory = new DirectoryIterator(dirname(__FILE__) . '/demos');
+$files = [];
+
+foreach ($directory as $fileinfo) {
+  if ($fileinfo->isFile() && $fileinfo->getExtension() == 'html') {
+    $files[] = $fileinfo->getFilename();
+  }
+}
+?>
+<div class="container"></div>
+  <div class="row">
+    <div class="col-md-3">
+      <ul class="list-group">
+        <?php foreach ($files as $file): ?>
+          <li class="list-group-item">
+            <a href="demoset.php?demo=<?php echo $file; ?>"><?php echo $file; ?></a>
+          </li>
+        <?php endforeach; ?>
+      </ul>
+    </div>
+    <div class="col-md-9">
+      <div id="content">
+        <?php
+        if (isset($_GET['demo']) && in_array($_GET['demo'], $files)) {
+          $demoFile = $_GET['demo'];
+          $demoContent = file_get_contents(dirname(__FILE__) . '/demos/' . $demoFile);
+          echo $demoContent;
+        } 
+        ?>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function loadContent(file) {
+  fetch('demos/' + file)
+    .then(response => response.text())
+    .then(data => {
+      document.getElementById('content').innerHTML = data;
+    });
+}
+</script>
+
+  </div>
+  <?php include("template/$OJ_TEMPLATE/footer.php"); ?>