CSS常用布局之——一列定宽，一列自适应解决方案

纵观css盒子（标准or非标准）常用的布局中，我大致分为2类，一种是居中，一种是等分。居中包含了水平居中，垂直居中，水平垂直居中；等分又包含了等分块布局，等分高布局……

一列定宽，一列自适应

---

1. float + margin

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .left {    float: left;    width: 100px;  }  .right {    margin-left: 100px    /*间距可再加入 margin-left */  }</style>

IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px

2. float + overflow

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .left {    float: left;    width: 100px;  }  .right {    overflow: hidden;  }</style>

设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文

3. table

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    display: table;    width: 100%;    table-layout: fixed;  }  .left {    display: table-cell;    width: 100px;  }  .right {    display: table-cell;    /*宽度为剩余宽度*/  }</style>

table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell中不可以设置 margin 但是可以通过 padding来设置间距

4. flex

<div class="parent">  <div class="left">    <p>left</p>  </div>  <div class="right">    <p>right</p>    <p>right</p>  </div></div><style>  .parent {    display: flex;  }  .left {    width: 100px;    margin-left: 20px;  }  .right {    flex: 1;  }</style>

低版本浏览器兼容问题