div css三列模板下载，如何自适应与兼容？-网站模板-锦华智联科技

模板特点

响应式设计：在桌面端显示为三列，在平板和手机上会自动堆叠为单列,确保在各种设备上都有良好的浏览体验。
现代布局：使用 Flexbox 实现，代码简洁,易于理解和维护。
语义化 HTML5：使用 <header>, <main>, <aside>, <footer> 等标签，有利于 SEO 和可访问性。
易于定制：通过修改 CSS 变量，可以轻松改变颜色、间距等主题样式。
无需外部依赖：所有代码都在一个 HTML 文件中,下载即可直接使用。

完整代码（可直接下载使用）

您可以直接将以下所有代码复制到一个新的 .html 文件中,然后用浏览器打开即可看到效果。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">三列布局模板</title>
    <style>
        /* --- 全局和基础样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        /* --- Flexbox 三列布局核心 --- */
        .main-content {
            display: flex; /* 1. 启用 Flexbox 布局 */
            gap: 20px;     /* 2. 设置列与列之间的间距 */
        }
        /* --- 左侧边栏 --- */
        .sidebar-left {
            flex: 0 0 200px; /* 3. 设置固定宽度: flex-grow: 0; flex-shrink: 0; flex-basis: 200px; */
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 5px;
        }
        /* --- 中间主内容区 --- */
        .main-column {
            flex: 1; /* 4. 设置自适应宽度，占据所有剩余空间 */
            padding: 20px;
            background-color: #fff;
        }
        /* --- 右侧边栏 --- */
        .sidebar-right {
            flex: 0 0 200px; /* 5. 同左侧边栏，设置固定宽度 */
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 5px;
        }
        /* --- 页头和页脚 --- */
        header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }
        footer {
            text-align: center;
            padding: 20px 0;
            margin-top: 20px;
            border-top: 1px solid #ddd;
            color: #777;
        }
        /* --- 响应式布局 --- */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column; /* 在小屏幕上，将布局改为垂直堆叠 */
            }
            .sidebar-left,
            .sidebar-right {
                flex: 1 0 auto; /* 让侧边栏宽度自适应，不再固定 */
            }
        }
        /* --- 一些示例内容样式 --- */
        h2 {
            color: #0056b3;
            margin-bottom: 15px;
        }
        p {
            margin-bottom: 15px;
        }
        .nav-menu ul {
            list-style: none;
        }
        .nav-menu ul li {
            margin-bottom: 10px;
        }
        .nav-menu ul li a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
        }
        .nav-menu ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>我的网站标题</h1>
            <p>这是一个使用 Flexbox 实现的三列响应式布局模板</p>
        </header>
        <main class="main-content">
            <!-- 左侧边栏 -->
            <aside class="sidebar-left">
                <h2>导航菜单</h2>
                <nav class="nav-menu">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">产品服务</a></li>
                        <li><a href="#">联系方式</a></li>
                    </ul>
                </nav>
            </aside>
            <!-- 中间主内容区 -->
            <section class="main-column">
                <h2>主内容标题</h2>
                <p>这里是网站的主要内容区域，它具有弹性（flex: 1），会自动占据左右侧边栏之外的所有可用空间。</p>
                <p>这个布局的核心是外层的 `display: flex` 和 `gap` 属性，它们让三列的排列和间距变得异常简单，在桌面端，内容水平排列；在移动端，通过媒体查询 `@media`，它会变成垂直堆叠，完美适配小屏幕设备。</p>
                <p>您可以根据需要修改这里的任何内容，或者通过调整 CSS 来改变布局的宽度、颜色和间距。</p>
            </section>
            <!-- 右侧边栏 -->
            <aside class="sidebar-right">
                <h2>热门文章</h2>
                <ul>
                    <li><a href="#">文章标题一</a></li>
                    <li><a href="#">文章标题二</a></li>
                    <li><a href="#">文章标题三</a></li>
                    <li><a href="#">文章标题四</a></li>
                </ul>
            </aside>
        </main>
        <footer>
            <p>&copy; 2025 我的公司名称. 保留所有权利.</p>
        </footer>
    </div>
</body>
</html>

代码核心解析

HTML 结构

.container: 一个包裹所有内容的容器，用于设置最大宽度和居中，是整个页面的“画布”。
.main-content: 这是三列布局的“舞台”,我们所有的列都将放在这里。
<aside class="sidebar-left">: 左侧边栏。
<section class="main-column">: 中间的主内容区，使用 <section> 或 <main> 标签来包裹核心内容是很好的实践。
<aside class="sidebar-right">: 右侧边栏。
<header> 和 <footer>: 分别定义了页头和页脚。

CSS 样式

.main-content { display: flex; }: 这是 最关键的一步，它将直接子元素（即三个 aside 和 section）变成了 Flex 项目,并让它们在水平方向上排列。
.sidebar-left { flex: 0 0 200px; }:
- flex 是一个简写属性。
- 0 0 200px 等同于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px;。
- flex-basis: 200px: 设置了元素的基准宽度为 200px。
- flex-grow: 0: 表示当有额外空间时,该元素不进行拉伸。
- flex-shrink: 0: 表示当空间不足时,该元素不进行压缩。
- 组合效果: 左右两个边栏都被固定为 200px 的宽度,无论容器如何变化。
.main-column { flex: 1; }:
- 这也是一个简写，等同于 flex: 1 1 0%;。
- flex-grow: 1: 这是关键，它告诉主内容区，去“抢占”所有剩余的可用空间,中间的列会自动拉伸以填满左右边栏之间的空隙。
gap: 20px;: 这是 Flexbox 的一个巨大便利，它直接设置了 Flex 项目之间的间距，比使用 margin 简单得多,且不会出现外边距重叠等问题。
（图片来源网络，侵删）
@media (max-width: 768px): 这是响应式设计的核心。
- 当浏览器窗口宽度小于 768px（通常是平板设备）时,这个样式块就会被激活。
- flex-direction: column;: 将 Flex 容器的方向从水平（row）改为垂直（column），这样,所有列就会从上到下依次堆叠。
- 我们移除了侧边栏的固定宽度（flex: 1 0 auto）,让它们在移动端也能自适应内容宽度。

如何下载和使用

复制代码：将上面提供的完整代码复制下来。
创建文件：在您的电脑上创建一个新的文本文档。
粘贴并保存：将复制的代码粘贴到新文档中，然后将文件另存为 index.html 或任何您喜欢的 .html 文件名。
打开预览：直接用 Chrome、Firefox、Edge 等现代浏览器打开这个 index.html 文件,即可看到效果。
开始修改：您现在可以随意修改 HTML 中的内容，或者调整 CSS 中的数值（如颜色、宽度 200px、间距 20px 等）来创建您自己的布局。

这个模板是一个绝佳的起点，它结构清晰，功能完善,希望能帮助到您！

（图片来源网络，侵删）