CSS布局技巧大全

参考资料：
http://www.imooc.com/article/2235

单列布局

水平居中

父元素text-align:center;子元素：inline-block;

优点：兼容性好；
不足：需要同时设置子元素和父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            text-align: center;
        }
        .child {
            display: inline-block;
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

子元素margin:0 auto;

优点：兼容性好
缺点：需要指定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

子元素

优点:只需要对自身进行设置
不足:IE6,7需要调整结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
            display:table;margin:0 auto;s
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

优点：兼容性好
缺点：需要知道子元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

优点：兼容性差
缺点：不需要知道子元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

弹性盒子：父元素：display:flex;justify-content:center;

优点：简单
缺点：兼容性差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

垂直居中

vertical-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            vertical-align:middle;
            line-height:450px;            
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;          
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50%;
            left:0;
            transform: translate(0,-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;
父元素：display:flex;align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            align-items: center;        
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;
子元素；display:inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
            text-align:center; 
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

父元素：position:relative;
子元素：position:absolute🔝50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者transform:translate(-50%,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            left: 0;
            right: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

多列布局

左侧定宽，右侧自适应

.left{float:left;width:100px;}
.right

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>左侧固定右侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .left {
      height: 400px;
      width:300px;
      background:red;
      float: left;
    }
    .right {
      height: 400px;
      margin-left:300px;
      background:blue;
    }
  </style>
</head>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>左侧固定右侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .left{
      width:300px;
      height:400px;
      float:left;
      background:red;
    } 
    .right-fix{
      width:100%;
      margin-left:-300px;
      float:right;
    } 
    .right
    {
      margin-left:300px;
      height:400px;
      background:blue;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right-fix">
        <div class="right">
          right
        </div>
      </div>
    </div>
</body>
</html>

.left{width:宽度值;float:left;} .right

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>左侧固定右侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .left{
      width:300px;
      height:400px;
      float:left;
      background:red;
    } 
    .right
    {
      height:400px;
      background:blue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

table实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>左侧固定右侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      display:table;
      table-layout:fixed;
      width:100%;
    }
    .left{
      width:300px;
      height:400px;
      background:red;
      display: table-cell;
    } 
    .right
    {
      height:400px;
      background:blue;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>左侧固定右侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      display:flex;
      width:100%;
    }
    .left{
      width:300px;
      height:400px;
      background:red;
    } 
    .right
    {
      height:400px;
      background:blue;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

右侧定宽左侧自适应

float+margin实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .left{
      width:100%;
      height:400px;
      background:red;
      float:left;
      margin-right: -300px;
    } 
    .right
    {
      height:400px;
      background:blue;
      width: 300px;
      float: right;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

table实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;

    }
    .left{
      width:100%;
      height:400px;
      background:red;
      display: table-cell;
    } 
    .right
    {
      height:400px;
      background:blue;
      width: 300px;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;

    }
    .left{
      flex:1;
      background:red;
      display: table-cell;
    } 
    .right
    {
      height:400px;
      background:blue;
      width: 300px;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

左边两列定宽，右侧自适应

float+margin实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;

    }
    .left,.center{
      background:red;
      float: left;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      margin-left: 600px;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

float+overflow实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;

    }
    .left,.center{
      background:red;
      float: left;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

table实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .left,.center{
      background:red;
      display: table-cell;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .left,.center{
      background:red;
      width: 300px;
      height: 400px;
    }
    .center {
      background:yellow;
    } 
    .right
    {
      height:400px;
      background:blue;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

左右定宽，中间自适应

float+margin实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
    }
    .left,.right{
      background:red;
      width: 300px;
      height: 400px;
      float: left;
    }
    .right {
      background:yellow;
      float: right;
    } 
    .center
    {
      height:400px;
      background:blue;
      width:100%;
      float: left;
      margin-right:-600px;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

table实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .left,.right{
      background:red;
      width: 300px;
      height: 400px;
      display: table-cell;
    }
    .right {
      background:yellow;
    } 
    .center
    {
      height:400px;
      background:blue;
      width:100%;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .left,.right{
      background:red;
      width: 300px;
      height: 400px;
    }
    .right {
      background:yellow;
    } 
    .center
    {
      height:400px;
      background:blue;
      width:100%;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        left
      </div>
      <div class="center">
        center
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

一列不定宽，一列自适应

table实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: auto; /*原文写的fixed，这是不对的*/
    }
    .left{
      background:red;
      height: 400px;
      display: table-cell;
      width: 0.1%;
    }
    .right {
      background:yellow;
      height: 400px;
      display: table-cell;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        leftffffffffffffff
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

BFC盒子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
    }
    .left{
      background:red;
      height: 400px;
      float: left;
    }
    .right {
      background:yellow;
      height: 400px;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        leftffffffffffffff
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .left{
      background:red;
      height: 400px;
    }
    .right {
      background:yellow;
      height: 400px;
      flex:1;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="left">
        leftffffffffffffff
      </div>
      <div class="right">
        right
      </div>
    </div>
</body>
</html>

多列等分布局

float+padding+margin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
      margin-left:-10px;
    }
    .col {
      height: 400px;
      float: left;
      padding-left: 10px;
      box-sizing: border-box;
      width:25%;
    }
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="col" style="background:yellow;">
        col1
      </div>
      <div class="col" style="background:red;">
        col2
      </div>
      <div class="col" style="background:green;">
        col3
      </div>
      <div class="col" style="background:blue;">
        col4
      </div> 
    </div>
</body>
</html>

table实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .col {
      height: 400px;
      display: table-cell;
    }
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="col" style="background:yellow;">
        col1
      </div>
      <div class="col" style="background:red;">
        col2
      </div>
      <div class="col" style="background:green;">
        col3
      </div>
      <div class="col" style="background:blue;">
        col4
      </div> 
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent {
      width: 100%;
      display: flex;
    }
    .col {
      height: 400px;
      flex:1;
    }
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="col" style="background:yellow;">
        col1
      </div>
      <div class="col" style="background:red;">
        col2
      </div>
      <div class="col" style="background:green;">
        col3
      </div>
      <div class="col" style="background:blue;">
        col4
      </div> 
    </div>
</body>
</html>

全屏布局

绝对定位实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    html,body,parent{
      height:100%;
      overflow:hidden;
      } 
    .top{
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:100px;
      background:red;
      } 
    .left{
      position:absolute;
      top:100px;
      left:0;
      bottom:50px;
      width:200px;
      background:blue;
      } 
    .right{
      position:absolute;
      overflow:auto;
      left:200px;
      right:0;
      top:100px;
      bottom:50px;
      background:yellow;
      } 
    .bottom{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:50px;
      background:black;
      }
  </style>
</head>
<body>
    <div class="parent">
      <div class="top">top</div>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="bottom">bottom</div>
    </div>
</body>
</html>

flex实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>右侧固定左侧自适应</title>
  <style>
    * {
      margin:0;
      padding:0;
    }
    .parent{
      display:flex;
      flex-direction:column;
      } 
    .top{
      height:100px;
    } 
    .bottom{
      height:50px;
      } 
    .middle{
      flex:1;
      display:flex;
      }
    .left{
      width:200px;
      } 
    .right{
      flex:1;
      overflow:auto;
      }
  </style>
</head>
<body>
    <div class="parent">
      <div class="top">top</div>
      <div class="middle">
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
      <div class="bottom">bottom</div>
    </div>
</body>
</html>

小结一下

跟着原作者一步一步做了这些布局，发现布局的方法就是那几种，只要真正领会他们到底是怎么回事，实现各种复杂布局并非难事。最后，在此向愿创者表示感谢，您的总结让我了解到了一些个以前不知道的东西。

posted @ 2017-09-06 07:45 大~熊阅读(838) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

大~熊

生活不只眼前的苟且，还有...

CSS布局技巧大全

单列布局

水平居中

垂直居中

水平垂直居中

多列布局

左侧定宽，右侧自适应

右侧定宽左侧自适应

左边两列定宽，右侧自适应

左右定宽，中间自适应

一列不定宽，一列自适应

多列等分布局

全屏布局

小结一下

公告