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的距离,也就把其拉到了上面。

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

  • 相关阅读:
    扩展AuthorizeAttribute
    扩展ValidationAttribute 1
    动态linq to list排序
    CSS属性书写顺序及命名规则
    增强网站可访问性的25种方法
    -webkit-filter是神马?
    docker安装
    docker的体系结构
    docker和虚拟化
    初识docker——docker基本概述
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/6170832.html
Copyright © 2011-2022 走看看