五种方法实现前端PC页面三栏布局(圣杯布局)

作者:神秘网友 发布时间:2020-09-08 08:24:55

五种方法实现前端PC页面三栏布局(圣杯布局)

五种方法实现前端PC页面三栏布局(圣杯布局)

写在前面

做PC端的小伙伴肯定遇到过需要实现三栏布局,即左右两侧宽度固定,中奖宽度自适应,而且这也是面试中经常会问到的问题,一般现在用到的会有五种解决方案,包括:浮动布局、绝对定位布局、flexbox布局、表格布局、网格布局

显示效果

五种方法实现前端PC页面三栏布局(圣杯布局)

代码实现

这里我们将左右两侧宽度固定为300px,高度300px

第一种——浮动布局

优点:兼容性好
缺点:有高度坍塌的问题,需清除浮动

	// HTML
	<div class="block">
     <div class="left">左侧宽度300px</div>
     <div class="right">右侧宽度300px</div>
     // 中间区域写在左右两个区域之后
     <div class="center">
       <h1>中间宽度自适应</h1>
     </div>
   </div>
	   
	// less
	.block{
	    color: #fff;
	    font-size: 20px;
	    div{
	      height: 300px;
	    }
	    .left, .right{
	      width: 300px;
	    }
	    .left{
	      background: blue;
	      float: left; // 左浮
	    }
	    .right{
	      background: green;
	      float: right; // 右浮
	    }
	    .center{
	      background: #f95644;
	    }
	  }

第二种——绝对定位布局

优点:快捷,不易出现问题
缺点:脱离文档流,子元素也将脱离文档流,可使用性比较差

	// HTML
	<div class="block">
     <div class="left">左侧宽度300px</div>
  	     <div class="center">
       <h1>中间宽度自适应</h1>
     </div>
     <div class="right">右侧宽度300px</div>
   </div>
	   
	// less
	.block{
	    color: #fff;
	    font-size: 20px;
	    div{
	      height: 300px;
	      position: absolute;
	    }
	    .left, .right{
	      width: 300px;
	    }
	    .left{
	      background: blue;
	      left: 0;
	    }
	    .right{
	      background: green;
	      right: 0;
	    }
	    .center{
	      background: #f95644;
	      left: 300px;
	      right: 300px;
	    }
	  }

第三种——flexbox布局

优点:css3新增的布局方式,就是为了解决第一种和第二种布局的不足出现的,推荐使用
缺点:存在兼容问题

	// HTML
	<div class="block">
     <div class="left">左侧宽度300px</div>
  	     <div class="center">
       <h1>中间宽度自适应</h1>
     </div>
     <div class="right">右侧宽度300px</div>
   </div>
	   
	// less
	.block{
	    color: #fff;
	    font-size: 20px;
	    display: flex;
	    div{
	      height: 300px;
	    }
	    .left, .right{
	      width: 300px;
	    }
	    .left{
	      background: blue;
	    }
	    .right{
	      background: green;
	    }
	    .center{
	      background: #f95644;
	      flex: 1;
	    }
	  }

第四种——表格布局

优点:兼容性最好,felxbox无法解决的问题可以使用表格布局
缺点:代码繁琐
	// HTML
	<div class="block">
     <div class="left">左侧宽度300px</div>
  	     <div class="center">
       <h1>中间宽度自适应</h1>
     </div>
     <div class="right">右侧宽度300px</div>
   </div>
	   
	// less
	.block{
	    color: #fff;
	    font-size: 20px;
	    display: table; // 设置父元素表格布局
	    width: 100%;
	    div{
	      height: 300px;
	      display: table-cell; // 使子元素成为表格单元格
	    }
	    .left, .right{
	      width: 300px;
	    }
	    .left{
	      background: blue;
	    }
	    .right{
	      background: green;
	    }
	    .center{
	      background: #f95644;
	    }
	  }

第五种——网格布局

优点:新技术

	// HTML
	<div class="block">
     <div class="left">左侧宽度300px</div>
  	     <div class="center">
       <h1>中间宽度自适应</h1>
     </div>
     <div class="right">右侧宽度300px</div>
   </div>
	   
	// less
	.block{
	    color: #fff;
	    font-size: 20px;
	    width: 100%;
	    display: grid; // 设置网格布局
	    grid-template-rows: 300px; // 网格行高300px
	    grid-template-columns: 300px auto 300px; // 网格左300px,中自适应,右300px
	    .left{
	      background: blue;
	    }
	    .right{
	      background: green;
	    }
	    .center{
	      background: #f95644;
	    }
	  }

其他问题——中间高度不固定,自动

高度不固定的情况下,各种布局都会有变化:

一、浮动布局:超出300px后,两侧会出现文字环绕的问题

二、绝对定位布局:中间区域超出,两侧高度不变

三、flexbox布局:左中右高度相同,左右两侧高度自动撑开

四、表格布局:左中右高度相同,左右两侧高度自动撑开

五、网格布局:中间区域高度无法超出300px

综上所述,在中间区域高度不固定的情况下,flexbox布局和表格布局是最好的

你还有更好的解决方案吗?留言一起探讨吧!

五种方法实现前端PC页面三栏布局(圣杯布局)相关教程

  1. mongoDB——自动分片介绍及简单实现
  2. 网络营销推广怎么做 打破传统微营销瓶颈 实现无销售成交革命
  3. 第5章 复杂查询
  4. Jmeter 常规方法(七) 函数助手_CSVRead
  5. Laravel中使用管道处理名字, 实现统一处理
  6. 介绍四种composer自动载入的方法
  7. 关于ThinkPHP6多例Redis类实现
  8. Linq 下的扩展方法太少了,您期待的 MoreLinq 来啦