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

最新推荐文章于 2022-07-29 21:33:22 发布

80大叔学前端

最新推荐文章于 2022-07-29 21:33:22 发布

阅读量288

点赞数

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

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

版权

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

最低0.47元/天解锁文章

80大叔学前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS三栏布局（左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局）

自己在做一个后台管理系统，没有美工，就自己用CSS简单搞一个三栏布局的页面。左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局。上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS三栏布局、左右两栏固定宽度</title> <style type="text/css">* {
复制链接

扫一扫