几种多列布局的实现方法

一、左列定宽，右列自适应

场景：该布局方式非常常见，适用于定宽的一侧常为导航，自适应的一侧为内容的布局。

(1) 利用float+margin实现

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

注：IE6会有3像素bug。

(2) 利用float+margin(fix)实现

<div class="parent">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right"></div>
    </div>
</div>

.left{
  width:100px;
  float:left;
}
.right-fix{
  width:100%;
  margin-left:-100px; /* 这个包含层是横跨左右的，其中左半部分被left压在下面，但其子元素利用margin避开了left */
  float:right;
}
.right{
  margin-left:100px;
}

(3) 使用float+overflow实现

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

overflow:hidden;，触发BFC模式（块级格式化上下文），浮动无法影响，隔离其他元素，但IE6不支持。左侧left设置margin-left当作left与right之间的边距，右侧利用overflow:hidden;形成BFC模式。

如果我们需要将两列设置为等高，可以用下述方法将“背景”设置为等高，但要注意不是内容的等高。

.left{
  width:100px;
  float:left;
}
.right{
  overflow:hidden;
}
.parent{
  overflow:hidden;
}
.left,.right{
  padding-bottom:9999px;
  margin-bottom:-9999px;
}

(4) 使用table实现

.parent{
  display:table;
  table-layout:fixed;
  width:100%;
}
.left{
  width:100px;
}
.right, .left{
  display:table-cell;
}

(5) 实用flex实现

.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}

利用右侧容器的flex: 1;，均分了剩余的宽度，也实现了同样的效果。而align-items 默认值为stretch，故二者高度相等

二、右列定宽，左列自适应

与一相似，只是把左右列互换。

(1) 使用float+margin实现

.parent{
  background:red;
  height:100px;
  margin:0 auto;
}
.left{
  background:green;
  margin-right:-100px;
  width:100%;
  float:left;
}
.right{
  float:right;
  width:100px;
  background:blue;
}

(2) 使用table实现

.parent{
  display:table;
  table-layout:fixed;
  width:100%;
}
.left{
  display:table-cell;
}
.right{
  width:100px;
  display:table-cell;
}

(3) 使用flex实现

.parent{
  display:flex;
}
.left{
  flex:1;
}
.right{
  width:100px;
}

三、两列定宽，一列自适应

场景：父容器为parent，子容器为left、center、right。其中，left、center定宽，right自适应。

(1) 利用float+margin实现

.left,.center{
  float:left;
  width:200px;
}
.right{
  margin-left:404px; /* 此处考虑了left和center的边框，否则得用box-sizing:border-box; */
}

(2) 利用float+overflow实现

.left,.center{
  float:left;
  width:200px;
}
.right{
  overflow:hidden;
}

(3) 利用table实现

.parent{
  display:table;
  table-layout:fixed;
  width:100%;
}
.left,.center,.right{
  display:table-cell;
}
.left,.center{
  width:200px;
}

(4) 利用flex实现

.parent{
  display:flex;
}
.left,.center{
  width:100px;
}
.right{
  flex:1
}

四、两侧定宽，中栏自适应

场景：父容器为parent，子容器为left、center、right。其中，left、right定宽，center自适应。

(1) 利用float+margin+fix实现

.left{
  width:100px;
  float:left;
}
.center-fix{
  float:left;
  width:100%;
  margin: 0 -100px; /* 为left和right腾出地方 */
}
.center {
  margin: 0 110px; /* fix内部再次缩窄 */
}
.right{
  width:100px;
  float:left;
}

<div class="left"></div>
<div class="center-fix">
	<div class="center"></div>
</div>
<div class="right"></div>

(2) 利用table实现

.parent{
  width:100%;
  display:table;
  table-layout:fixed;
}
.left,.center,.right{
  display:table-cell;
}
.left,.right{
  width:100px;
}

(3) 利用flex实现

.parent{
  display:flex;
}
.left{
  width:100px;
}
.center{
  flex:1;
}
.right{
  width:100px;
}

五、一列不定宽，一列自适应

(1) 利用float+overflow实现

.left{
  float:left;
}
.right{
  overflow:hidden;
}

(2) 利用table实现

.parent{
  display:table;
  table-layout:fixed;
  width:100%;
}
.left{
  width:0.1%;
}
.left,.right{
  display:table-cell;
}

(3) 利用flex实现

.parent{
  display:flex;
}
.right{
  flex:1;
}

六、多列等分布局

多列等分布局常出现在内容中，多数为功能的，同阶级内容的并排显示等。

html结构如下所示

<div class="parent">
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>

(1) 实用float实现

.parent{
  margin-left:-20px; /*假设列之间的间距为20px*/
}
.column{
  float:left;
  width:25%;
  padding-left:20px;
  box-sizing:border-box; /* IE盒模型 */
}

(2) 利用table实现

.parent-fix{
  margin-left:-20px;
}
.parent{
  display:table;
  table-layout:fixed;
  width:100%;
}
.column{
  display:table-cell;
  padding-left:20px;
}

(3) 利用flex实现

.parent{
  display:flex;
}
.column{
  flex:1;
}
.column+.column{
  margin-left:20px;
}

七、九宫格布局

(1) IE6专用九宫格

body,ul,li{margin:0;padding:0;}
.grid_wrapper{
    width: 170px;
    height: 170px;
    margin-left: auto;
    margin-right: auto;
}
.grid{
    margin-left: 5px;
    margin-top: 5px;
    list-style-type:none;
}
.grid:after{
    content: ".";
    display: block;
    line-height: 0;
    width:0;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
}
.grid li{float:left;line-height: 50px;}
.grid li a, .grid li a:visited{
    display:block;
    border: 5px solid #ccc;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-left: -5px;
    margin-top: -5px;
    position: relative;
    z-index: 1;
}
.grid li a:hover{
    border-color: #f00;
    z-index: 2;
}

<div class="grid_wrapper">
    <ul class="grid">
        <li><a href="#" title="1">1</a></li>
        <li><a href="#" title="2">2</a></li>
        <li><a href="#" title="3">3</a></li>
        <li><a href="#" title="4">4</a></li>
        <li><a href="#" title="5">5</a></li>
        <li><a href="#" title="6">6</a></li>
        <li><a href="#" title="7">7</a></li>
        <li><a href="#" title="8">8</a></li>
        <li><a href="#" title="9">9</a></li>
    </ul>
</div>

(2) 使用table实现

注意：IE6下兼容有问题。

<div class="parent">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

.parent{
  display:table;
  table-layout:fixed;
  width:100%;
}
.row{
  display:table-row;
}
.item{
  display:table-cell;
  width:33.3%;
  height:200px;
}

(3) 实用flex实现

<div class="parent">
	<div class="row">
 		<div class="item"></div><div class="item"></div><div class="item"></div>
  </div>
	<div class="row">
      <div class="item"></div><div class="item"></div><div class="item"></div>
  </div>
	<div class="row">
      <div class="item"></div><div class="item"></div><div class="item"></div>
  </div>
</div>

.parent{
  display:flex;
  flex-direction:column;
}
.row{
  height:100px;
  display:flex;
}
.item{
  width:100px;
  background:red;
}

八、全屏布局

(1) 利用绝对定位实现

<div class="parent">
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="bottom">bottom</div>
</div>

html,body,.parent{
  height:100%;
  overflow:hidden;
}
.top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100px;
}
.left{
  position:absolute;
  top:100px;
  left:0;
  bottom:50px;
  width:200px;
}
.right{
  position:absolute;
  overflow:auto;
  left:200px;
  right:0;
  top:100px;
  bottom:50px;
}
.bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
}

(2) 利用flex实现

<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>

.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;
}

九、响应式布局

(1) meta标签的实用

设置布局宽度等于设备宽度，布局viewport等于度量viewport。

<meta name="viewport" content="width=device-width,initial-scale=1">

(2) 媒体查询

一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体，screen 和 print 是两种已定义的媒体类型，媒体查询让样式表有更强的针对性，扩展了媒体类型的功能；媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成，媒体查询中可用于检测的媒体特性有width、height和color（等），使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

语法：
@media screen and (max-width:960px){....}

或

<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css' />

- end -