zoukankan      html  css  js  c++  java
  • 双飞翼布局

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         body{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         .fix{
    12             float: left;
    13         }
    14         .left{
    15             background-color: red;
    16             width: 150px;
    17             margin-left: -100%;
    18         }
    19         .main{
    20             background-color: cornflowerblue;
    21             width: 100%;
    22         }
    23         .right{
    24             background-color: chartreuse;
    25             width: 200px;
    26             margin-left: -200px;
    27         }
    28         .inner{
    29             margin-left: 150px;
    30             margin-right: 200px;
    31         }
    32     </style>
    33 </head>
    34 <body>
    35 <div id="box">
    36     <div class="main fix"><div class="inner">中间</div></div>
    37     <div class="left fix">左边</div>
    38     <div class="right fix">右边</div>
    39 </div>
    40 </body>
    41 </html>

    个人理解:

      双飞翼布局目的是实现当浏览器界面缩小的时候左右定宽,中间缩小。所以有左右两块设置定宽。

      解释下负边距问题,我的理解是,先说没有负边距时候的效果,上面代码中左边会挤没,右边被挤下来。而双飞翼布局目的是要把左右两块和中间的一块并排排列,而这里的实现方式是把左右两块和中间的内部块并排排列。为了实现这种效果,就设置了负边距,负边距的意思是把他俩“抓”到里面去。-100% 和 -200px的区别,说白了就是把-100%的元素放到最前面,100%指的是整个界面的宽度,-200px只是单纯的将元素强制向左“拉”200px的距离,也就把其拉到了上面。

      最终的结果就是,把“左块”、“右块”、“中间内部块”都拉入到了中间内部。从而实现双飞翼。

  • 相关阅读:
    IE浏览器版本的判断
    Ajax中的同步和异步
    linq之多表连接
    C#中const 和 readonly 修饰符的用法详解
    sql中的分页实现
    JS中的编码,解码类型及说明
    HttpContext概念讲解
    VS语法书写提示
    c#版本23个设计模式
    批处理 使用默认浏览器 打开html文件
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/6170832.html
Copyright © 2011-2022 走看看