三栏布局总结

UCloud 发布于2019-08-29 12:24 / 1047人阅读

摘要：前言所谓三栏布局，即使指两边定宽，中间宽度自使用的布局方式，在过去，一直是一个麻烦的问题，为了解决这个问题，有各种奇技淫巧，最出名的非圣杯布局和双飞翼布局莫属了，但是自发展以来，特别是布局的支持度越来越好，这个问题也越来越淡化了正文浮动布局

前言

所谓三栏布局，即使指两边定宽，中间宽度自使用的布局方式，在过去，一直是一个麻烦的问题，
为了解决这个问题，有各种奇技淫巧，最出名的非圣杯布局和双飞翼布局莫属了，但是自CSS3发展以来，
特别是flexbox布局的支持度越来越好，这个问题也越来越淡化了

正文

浮动布局

HTML如下：

Left
Right
Main

CSS如下：

        body, html {
     height: 100%;
     padding: 0;
     margin: 0;
   }
   .left{
     background: red;
     width:100px;
     float: left;
     height:100%;
   }
   .main{
     background:blue;
     height:100%;
     margin-left:100px;
     margin-right:200px;
   }
   .right{
     background:red;
     width:200px;
     float: right;
     height:100%;
   }

浮动布局代码比较简洁，同时也易于理解，但是浮动往往会带来塌陷等问题，而且浮动渲染计算量

较大，在移动端性能表现较差。另一个需要注意的是，main即中间部分需要放在最后，如果是left-main-right的方式

纳闷main部分将会占满剩余空间，right也就被挤到下一行了，相反，如果我们设置了right和left，在设置main
main部分将会流入left和right的下面，从而达到我们的目的

绝对定位

HTML如下：

left
main
right

CSS如下：

           body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.left, .right {
  position: absolute;
  top: 0;
  background: red;
  height: 100%;
}

.left {
  left: 0;
  width: 100px;
}

.right {
  right: 0;
  width: 200px;
}

.main {
  margin-left: 100px;
  margin-right: 200px;
  height: 100%;
  background: blue;
}

该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

圣杯布局

圣杯布局巧妙的利用负margin来使元素上移，再结合相对定位，移到外层容器的padding位置，从而达到目标

HTML如下：

main
left
right

CSS如下：

        body, html {
     height: 100%;
     padding: 0;
     margin: 0;
   }
   body{
     padding-left:100px;
     padding-right:200px;
   }
   .left{
     background: red;
     width:100px;
     float: left;
     margin-left:-100%;/*-100%：1、导致left超出body内容(此时body内容宽度只有100%-200-100）移到上层2：margin是根据父元素的宽度的，所以-100%就到上层body内容的最前*/
     position: relative;
     left:-100px;/*-100px为了超出body内容左边,到达视窗最左*/
     height:100%;
   }
   .main{
     background: blue;
     width:100%;
     height:100%;
     float: left;
   }
   .right{
     background:red;
     width:200px;
     height:100%;
     float: left;
     margin-left:-200px;/*-200px为了超出body内容到达上一层body内容最后*/
     position: relative;
     right:-200px;/*-200px是为了向右偏移回到视窗最右*/
   }
   .container{
     width:500px;
     height:200px;
   }

问题：如果外层内容盒宽度过小，不足以容纳.left的宽度，那么.left依然会被保留在下层

双飞翼布局

双飞翼布局与圣杯布局原理类似，只不过是取消了外层的padding，从而使内容盒等于padding-box从而避免了.left上移后需要设置left值移动到padding

HTML如下：


  
    main
  


  left


  right

CSS如下：

          body, html {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  body{
    /*padding-left:100px;*/
    /*padding-right:200px;*/
  }
  .left{
    background: red;
    width:100px;
    float: left;
    margin-left:-100%;/*-100% 1：是为了超出body内容(此时body内容为100%)最左 2：到达body上层内容最左也就是视窗最左
    /*position: relative;*/
    /*left:-100px;*/
    height:100%;
  }
  .main{
    background: blue;
    width:100%;
    height:100%;
    float: left;
  }
  .right{
    background:red;
    width:200px;
    height:100%;
    float: left;
    margin-left:-200px;/*-200px 1：是为了超出body内容(此时body内容为100%)最左 2：到达body上层内容最右也就是视窗最右
    /*position: relative;*/
    /*right:-200px;*/
  }
  .inner{
    margin-left:100px;
    margin-right:200px;
  }

与圣杯布局不同的地方已用注释指出，而双飞翼问题与圣杯一样

flexbox布局

flexbox布局可谓是最为理想的解决方案了，一方面，代码简洁易懂，另一方面，当宽度太小时，也可以通过伸缩，避免重叠

HTML如下：

main
left
right

CSS如下：

body,html{
   height:100%;
   padding: 0;
   margin:0;
 }
 body{
   display: flex;
   flex-flow:row nowrap;
 }
 .left{
   background: red;
   width:100px;
   height:100%;
   order:0;
 }
 .main{
   background-color: blue;
   flex:1;
   height:100%;
   order:1;
 }
 .right{
   background: red;
   width:200px;
   height:100%;
   order:2;
 }

云服务器混合云三栏布局 html5 三栏布局年终总结网络总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111868.html

实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0