CSS双飞翼布局

双飞翼布局是一种经典的CSS布局模式,主要用于实现左右两列固定宽度,中间列自适应的布局。

比如:写一个左中右布局占满全屏,其中左、右两块固定宽 200px,中间自适应,要求先加载中间块。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100vw;
        height: 100vh;
        color: #fff;
      }
        /* 内容区域 */
        .container > div {
          float: left;
        }

        /* 左侧栏 */
        .left {
          width: 200px;
          height: 100vh;
          margin-left: -100%;
          background-color: red;
        }

        /* 右侧栏 */
        .right {
          width: 200px;
          height: 100vh;
          margin-left: -200px;
          background-color: blue;
        }

        /* 中间栏 */
        .middle {
          width: 100%;
          height: 100vh;
          background-color: pink;
        }
        .main {
          padding: 0 200px;
        }
    </style>
</head>
<body>
  <!-- 双飞翼布局 -->
    <div class="container">
        <div class="middle">
          <div class="main">中间自适应内容</div>
        </div>
        <div class="left">左侧固定宽度</div>
        <div class="right">右侧固定宽度</div>
    </div>
</body>
</html>

左右 200px 中间自适应

相关推荐
祈祷苍天赐我java之术24 分钟前
CSS 进阶用法
前端·css
大宝贱6 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
Running_slave11 小时前
Web跨标签页通信应该怎么玩?
javascript·css·后端
前端老鹰14 小时前
CSS text-decoration-thickness:精细控制文本装饰线粗细的新属性
前端·css
是罐装可乐15 小时前
前端架构知识体系:css架构模式和代码规范
前端·css·代码规范·tailwind·bem·css原子化
ᥬ 小月亮16 小时前
Uniapp中自定义导航栏
javascript·css·uni-app
暖木生晖17 小时前
引入资源即针对于不同的屏幕尺寸,调用不同的css文件
前端·css·媒体查询
前端搬运侠19 小时前
🚀 前端面试必刷!50道HTML+CSS高频面试题详解
css·html
太空铃兰19 小时前
TailWindCss v4.1在Vue3里的使用
css·vue.js