几种布局方式（两栏布局，三栏布局，等高布局，流式布局）

2014-11-17

最近面试的时候被问到了两栏或者三栏自适应等相关布局问题，现在总结一下

一、左侧固定宽度，右侧自适应

1. float+margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex">
  <title>1\. float+margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.m-box{margin: 5px;}
.m-box .left,.m-box .right { height: 200px; }
.m-box .left{float:left; width:200px; background-color:#ccc; }
.m-box .right{margin-left:210px;  background-color:#666;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="left">左</div>
      <div class="right">右</div>
  </div>
</body>
</html>

预览地址：float+margin（一侧定宽，一侧自动）

2.position: absolute+margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex">
  <title>2.position+margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
  html,body{margin:0; padding: 0;}
  .m-box{margin: 5px;}
  .m-box .left,.m-box .right { height: 200px; }
  .m-box .left{position: absolute; width:200px; background-color:#ccc; }
  .m-box .right{margin-left:210px;  background-color:#666;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="left">左</div>
      <div class="right">右</div>
  </div>
</body>
</html>

预览地址：position+margin（一侧定宽，一侧自动）

3.float+负margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>3.float+负margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
  html,body{margin:0; padding: 0;}
  .m-box .cont,.m-asider { height: 200px; }
  .m-box { float:left; width: 100%;}
  .m-box .cont {margin-left:210px;background-color: #ccc;}
  .m-asider {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="cont">右</div>
  </div>
  <div class="m-asider">左</div>
</body>
</html>

预览地址：float+负margin（一侧定宽，一侧自动）

4.position: relative+margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>4.position: relative+margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.g-bd1{margin:5px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;background: #002b36;height: 200px;}
.g-mn1{float:right;width:100%;background: #116644;height: 200px;}
.g-mn1c{margin-left:200px;}
</style>
</head>
<body>
<div class="g-bd1">
    <div class="g-sd1">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>
</body>
</html>

预览地址：position: relative+margin（一侧定宽，一侧自动）

二、右侧固定宽度，左侧自适应

右侧固定宽度，左侧自适应

1. float+margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>1\. float+margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
  html,body{margin:0; padding: 0;}
  .m-box{margin: 5px;}
  .m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; }
  .m-box .left{ margin-right:210px;background-color:#ccc; }
  .m-box .right{float:right;background-color:#666; width:200px;}
  p{color: #ff0000;font-weight: bolder;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="right">右</div>
      <div class="left">左</div>
  </div>
  <p>这里要注意两个div的顺序，一定是固定的div在前面!!!</p>
</body>
</html>

预览地址：float+margin（一侧定宽，一侧自动）

2.position: absolute+margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>2.position+margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
  html,body{margin:0; padding: 0;}
  .m-box{margin: 5px;position: relative;}
  .m-box .left,.m-box .right { height: 200px;}
  .m-box .left{margin-right:210px; background-color:#ccc; }
  .m-box .right{ position: absolute; background-color:#666;width:200px;right: 0px; top: 0;}
  p{color: #ff0000;font-weight: bolder;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="left">左</div>
      <div class="right">右</div>
  </div>
  <p>这里要注意给m-box添加position: relative;属性，同时也注意给class right添加top和right属性</p>
</body>
</html>

预览地址：position+margin（一侧定宽，一侧自动）

3.float+负margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>3.float+负margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.m-box .cont,.m-asider { height: 200px;  }
.m-box { float:left;margin-left: -210px; width: 100%;}
.m-box .cont {background-color: #ccc;margin-left: 210px;}
.m-asider {float: right; width: 200px;  background-color: #ccc;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="cont" >左</div>
  </div>
  <div class="m-asider">右</div>
</body>
</html>

预览地址：float+负margin（一侧定宽，一侧自动）

4.position: relative+margin（一侧定宽，一侧自动），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>4.position: relative+margin（一侧定宽，一侧自动）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.g-bd2{margin:5px;}
.g-sd2{position:relative;float:right;width:230px;margin-left:-230px;background: #116644;height: 200px;}
.g-mn2{float:left;width:100%;background: #002b36;height: 200px;}
.g-mn2c{margin-right:240px;}
</style>
</head>
<body>
  <div class="g-bd2">
    <div class="g-mn2">
        <div class="g-mn2c">
            <p>左侧自适应</p>
        </div>
    </div>
    <div class="g-sd2">
        <p>右侧定宽</p>
    </div>
</div>
</body>
</html>

预览地址：position: relative+margin（一侧定宽，一侧自动）

三、两侧定宽，中间自适应

1.float+margin（两侧定宽，中间自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>1.float+margin（两侧定宽，中间自适应）</title>
<style id="jsbin-css">
   html,body{margin:0; padding: 0;}
  .left,.right,.center { height: 200px; }
  .left {float:left; width: 200px; background-color: #ccc;}
  .right {float:right; width: 200px; background-color: #ccc;}
  .center { margin: 0 210px; background-color: #666;}
</style>
</head>
<body>
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
</body>
</html>

预览地址：float+margin（两侧定宽，中间自适应）

2.position: absolute+margin（两侧定宽，中间自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>2.position+margin（两侧定宽，中间自适应）</title>
<style id="jsbin-css">
   html,body{margin:0; padding: 0;}
  .left,.right,.center { height: 200px;}
  .left {position:absolute; top:0; left:0; width: 200px; background-color: #ccc;}
  .right {position:absolute; top:0; right:0;  width: 200px; background-color: #ccc;}
  .center { margin: 0 210px; background-color: #666;}
</style>
</head>
<body>
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
</body>
</html>

预览地址：position+margin（两侧定宽，中间自适应）

3.float+负margin（两侧定宽，中间自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>3.float+负margin（两侧定宽，中间自适应）</title>

<style id="jsbin-css">
  html,body{margin:0; padding: 0;}
  .left,.right,.m-box .center { height: 200px;}
  .m-box { float:left; width: 100%;}
  .m-box .center {margin:0 210px;background-color: #666;}
  .left,.right {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
  .right {margin-left: -200px;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="center">中</div>
  </div>
  <div class="left">左</div>
  <div class="right">右</div>
</body>
</html>

预览地址：float+负margin（两侧定宽，中间自适应）

4.position: relative+margin（两侧定宽，中间自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>4.position: relative+margin（两侧定宽，中间自适应）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.g-bd5{margin:5px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;background: #3e8f3e;height: 200px;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;background: #7F9F7F;height: 200px;}
.g-mn5c{margin:0 200px 0 240px;}
</style>
</head>
<body>
  <div class="g-bd5">
    <div class="g-sd51">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中间自适应</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右侧定宽</p>
    </div>
</div>
</body>
</html>

预览地址：position: relative+margin（两侧定宽，中间自适应）

四、左中定宽，右边自适应

1.float+margin（左中定宽，右边自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>1.float+margin（左中定宽，右边自适应）</title>
<style id="jsbin-css">
  html,body{margin:0; padding: 0;}
  .left,.right,.center { height: 200px; }
  .left {float:left; width: 200px; background-color: #ccc;}
  .center {float:left; width: 200px; background-color: #ccc;margin-left: 10px;}
  .right { margin: 0 0 0 420px;; background-color: #666;}
</style>
</head>
<body>
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</body>
</html>

预览地址：float+margin（左中定宽，右边自适应）

2.position: absolute+margin（左中定宽，右边自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>2.position+margin（左中定宽，右边自适应）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px;}
.left {position:absolute; top:0; left:0; width: 200px; background-color: #ccc;}
.center {position:absolute; top:0; left:210px;  width: 200px; background-color: #ccc;}
.right { margin-left: 420px; background-color: #666;}
</style>
</head>
<body>
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</body>
</html>

预览地址：position+margin（左中定宽，右边自适应）

3.float+负margin（左中定宽，右边自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>3.float+负margin（左中定宽，右边自适应）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.left,.center,.m-box .right { height: 200px;}
.m-box { float:left; width: 100%;}
.m-box .right {margin-left:420px;background-color: #666;}
.left,.center {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
.center {margin-left: 210px;margin-top: -200px;}
</style>
</head>
<body>
  <div class="m-box">
    <div class="right">右</div>
  </div>
  <div class="left">左</div>
  <div class="center">中</div>
</body>
</html>

预览地址：float+负margin（左中定宽，右边自适应）

五、右中定宽，左边自适应

1.float+margin（右中定宽，左边自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>1.float+margin（右中定宽，左边自适应）</title>
<style id="jsbin-css">
 html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px; }
.center,.right {float:right; width: 200px; background-color: #ccc;}
.center{margin-right: 10px;}
.left { margin-right: 420px; background-color: #666;}
</style>
</head>
<body>
  <div class="right">右</div>
  <div class="center">中</div>
  <div class="left">左</div>
</body>
</html>

预览地址：float+margin（右中定宽，左边自适应）

2.position: absolute+margin（右中定宽，左边自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>2.position: absolute+margin（右中定宽，左边自适应）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px;}
.left {margin-right: 420px;   background-color: #ccc;}
.center {position:absolute; top:0; right:210px;  width: 200px; background-color: #ccc;}
.right { position:absolute;top:0; right:0;width: 200px; background-color: #666;}
</style>
</head>
<body>
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</body>
</html>

预览地址：position: absolute+margin（右中定宽，左边自适应）

3.float+负margin（右中定宽，左边自适应），代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="robots" content="noindex">
  <title>3.float+负margin（右中定宽，左边自适应）</title>
<style id="jsbin-css">
html,body{margin:0; padding: 0;}
.right,.center,.m-box .left { height: 200px;}
.m-box { float:left; width: 100%;}
.m-box .left {background-color: #666;margin-right: 420px;}
.right,.center {float: right; width: 200px;  background-color: #ccc;margin-top: -200px;}
.center {margin-right: 210px;}
</style>
</head>
<body>
  <div class="m-box">
      <div class="left">左</div>
  </div>
  <div class="center">中</div>
  <div class="right">右</div>
</body>
</html>

预览地址：float+负margin（右中定宽，左边自适应）

未完，待续

参考资料：

老生长谈：css实现右侧固定宽度，左侧宽度自适应

两栏布局，三栏布局，等高布局，流式布局

我熟知的三种三栏网页宽度自适应布局方法

NEC代码库

note：display：flex，grid，table