arraylist sed charts uiviewcontroller odbc android实战项目 linux获取当前时间 office配置进度 python配置环境 python中open python的random模块 python如何调用函数 python环境变量配置 python函数大全 java获取当前年份 java实现多线程 java方法调用 网站数据分析工具 r语言和python ps选择反向快捷键 maxtoc4d 蜘蛛皮肤 vbs代码 pp安卓助手 搜狐影音播放器 古特里克的杀生刀 砸金蛋抽奖活动 lol世界第一 csgo帧数显示 淘宝图片下载器 js绑定事件的方法 手机下载微博客户端 快剪辑去水印 cdr调和工具怎么用 cdr如何做立体字 smartupload 鼠标指向宏 ps做表格 挂卡 word怎么添加字体
当前位置: 首页 > 学习教程  > 编程语言

圣杯布局和双飞翼布局

2020/10/8 20:14:37 文章标签:

圣杯布局&#xff1a; <div id"app"><div class"center">中间</div><div class"left">左边</div><div class"right">右边</div></div>#app {margin: 0 200px;}.center {float: left;…

圣杯布局:

  <div id="app">
    <div class="center">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
    #app {
      margin: 0 200px;
    }
    .center {
      float: left;
      width: 100%;
      height: 500px;
      background-color: red;
    }
    .left {
      float: left;
      width: 200px;
      height: 500px;
      margin-left: -100%;
      background-color: yellow;
      position: relative;
      left: -200px;
    }
    .right {
      float: left;
      width: 200px;
      height: 500px;
      margin-left: -200px;
      background-color: green;
      position: relative;
      left: 200px;
    }

双飞翼布局:

  <div id="app">
    <div class="center">
      <div class="inside">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
    .center {
      float: left;
      width: 100%;
      height: 500px;
      background-color: red;
    }
    .inside {
      margin: 0 200px;
    }
    .left {
      float: left;
      width: 200px;
      height: 500px;
      margin-left: -100%;
      background-color: yellow;
    }
    .right {
      float: left;
      width: 200px;
      height: 500px;
      margin-left: -200px;
      background-color: green;
    }

本文链接: http://www.dtmao.cc/news_show_250229.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?