如何将iFrame布局为2列或3列？优化代码实现全屏查看

没问题！我帮你调整了代码，用CSS Grid实现了整洁的2列/3列全屏布局，同时修复了原代码里的拼写错误，让整体布局更美观且支持全屏查看。下面是两种方案的完整代码：

2列布局方案 #

这个方案会把页面分成两个等宽的列，每个iframe占满对应列的空间，按钮放在顶部统一控制：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: grid;
            grid-template-rows: auto 1fr; /* 顶部按钮栏 + 两列iframe区域 */
            grid-template-columns: 1fr 1fr; /* 两列等宽 */
            gap: 8px; /* 列之间的间隙，可选 */
            padding: 8px;
        }
        .button-bar {
            grid-column: 1 / -1; /* 按钮栏横跨所有列 */
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: 1px solid #ddd; /* 可选边框，增强区分度 */
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="button-bar">
        <!-- 控制第一列iframe -->
        <input type="button" onclick="document.getElementById('frame1').src='https://example.com'" value="切换框架1">
        <input type="button" onclick="document.getElementById('frame1').src='https://example.org'" value="切换框架1备选">
        <!-- 控制第二列iframe -->
        <input type="button" onclick="document.getElementById('frame2').src='https://example.net'" value="切换框架2">
        <input type="button" onclick="document.getElementById('frame2').src='https://example.edu'" value="切换框架2备选">
    </div>

    <iframe id="frame1" src="https://example.com"></iframe>
    <iframe id="frame2" src="https://example.net"></iframe>
</body>
</html>

3列布局方案 #

只需要修改grid-template-columns为1fr 1fr 1fr，并添加第三列的iframe和控制按钮即可：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: grid;
            grid-template-rows: auto 1fr;
            grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
            gap: 8px;
            padding: 8px;
        }
        .button-bar {
            grid-column: 1 / -1;
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
            flex-wrap: wrap; /* 小屏幕自动换行 */
        }
        iframe {
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="button-bar">
        <input type="button" onclick="document.getElementById('frame1').src='https://example.com'" value="切换框架1">
        <input type="button" onclick="document.getElementById('frame2').src='https://example.net'" value="切换框架2">
        <input type="button" onclick="document.getElementById('frame3').src='https://example.org'" value="切换框架3">
    </div>

    <iframe id="frame1" src="https://example.com"></iframe>
    <iframe id="frame2" src="https://example.net"></iframe>
    <iframe id="frame3" src="https://example.org"></iframe>
</body>
</html>

关键优化点说明： #

• 用CSS Grid实现全屏布局，确保iframe占满可用空间，同时保留顶部的按钮控制栏
• 重置了默认的边距和内边距，避免页面出现不必要的留白
• 添加了间隙（gap）和圆角边框，提升视觉美观度
• 按钮栏支持小屏幕自动换行，兼顾响应式体验
• 修复了原代码中getElementById的拼写错误，确保JS逻辑正常运行

你可以根据需求选择2列或3列版本，替换示例URL为你需要的地址即可。

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