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

最新推荐文章于 2024-08-24 21:17:20 发布

80大叔学前端

最新推荐文章于 2024-08-24 21:17:20 发布

阅读量337

点赞数

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/dashu_fe/article/details/119392258

版权

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

摘要由CSDN通过智能技术生成

自己在做一个后台管理系统，没有美工，就自己用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