CSS三栏布局（左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局）

最新推荐文章于 2023-06-27 10:45:57 发布

原创

最新推荐文章于 2023-06-27 10:45:57 发布 · 387 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

这篇博客介绍了如何使用CSS创建一个三栏布局，其中左右两栏宽度固定，中间栏优先加载并根据屏幕大小自适应。作者分享了具体的代码实现，并展示了布局在浏览器中的效果，适用于后台管理系统界面。

自己在做一个后台管理系统，没有美工，就自己用CSS简单搞一个三栏布局的页面。

左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局。

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三栏布局、左右两栏固定宽度</title>
    <style type="text/css">* {
        margin: 0;
        padding: 0px;
    }

    .header {
        background: #ccc;
        text-align: center;
    }

    .main {
        overflow: hidden;
        *zoom: 1;
    }

    .box {
        margin-top: 30px;
    }

    .box .main2 {
        float: left;
        width: 100%;
        margin-bottom: -3000px;
        padding-bottom: 3000px;
        background: #F90;
    }

    .box .main3 {
        margin: 0 200px 0 150px;
    }

    .box .left {
        float: left;
        margin-left: -100%;
        width: 150px;
        background: #6C0;
        margin-bottom: -3000px;
        padding-bottom: