常见布局-三栏布局

作者: 饥人谷_有点热 | 来源:发表于2017-05-21 17:42 被阅读0次

前端开发-常见CSS布局
CSS全面解析之二：CSS 布局
深入理解Android布局就看这个！
三栏布局——五种解决方案
Flex弹性布局介绍
CSS的常见布局方式
css笔记-1/css的学习思路
网页基本布局
CSS布局
CSS布局

两侧两列固定宽度，中间列自适应宽度

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>三列</title>
  <style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;
      height: 400px;
      background: red;
    }
    
    #footer{
      background: #ccc;
    }
  
  </style>
</head>
<body>
  <div id="content">
    <!-- 为什么不是main在前面 -->
    <div class="menu">aside</div>
   
    <div class="aside">aside</div>
     <div class="main">content</div>
    
  </div>
  <div id="footer">footer</div>
</body>
</html>

实现demo

为什么要加margin-left和margin-right？
为了使main的内容可以正常显示，不容会被左右浮动的menu和aside遮盖住一部份

为什么不是main在前面？
如果main在前，因为main为块级元素。浏览器渲染时，会将它独占一行，那么接下去的两个浮动元素就会在main的下面一行进行浮动，无法实现浮于main 上方的效果。

圣杯布局

圣杯布局解决了什么问题？
使得三栏布局中间的区块可以在在dom元素次序中优先位置。

实现
注释编号为实现顺序

  <style>
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
      padding-left: 100px;  /*5*/
      padding-right: 150px; /*5*/
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }
    
    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/
      
      margin-left: -100%;  /*4*/
      position: relative;  /*6*/
      left: -100px;        /*6*/
    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/
      
      margin-left: -150px; /*5*/
      position: relative;  /*7*/
      left: 150px;         /*7*/
      
    }
    .main{
      height: 350px;       /*1*/
      background: blue;    /*1*/
      
      width: 100%;         /*3*/
    }
  
  </style>

  <div id="content">
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

实现demo
缺点：
.main的最小宽度不能小于.aside的宽度。原因为margin-left: -100%;不足以偏移掉整个元素的宽度。

双飞翼布局

所以有了双飞布局来解决圣杯布局这个缺点

实现
注释编号为实现顺序

<style>
    
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
  
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }
    
    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/
      
      margin-left: -100%;  /*4*/

    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/
      
      margin-left: -150px; /*5*/

      
    }
    .main{
      /* background: blue;  */   /*第1步添加，第7步注释掉*/
      /* height: 350px;  */      /*第1步添加，第7步注释掉*/
      
      width: 100%;         /*3*/
    }
    
    .wrap{
      margin-left: 100px;  /*6*/
      margin-right: 150px; /*6*/
      background: blue;    /*7*/
      height: 350px;       /*7*/
 
    }
  
  </style>
  
  <div id="content">
    <div class="main">
      <div class="wrap">main</div>
    </div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

实现demo