多列布局

完整源码：戳这

定宽布局

前提：定宽度，其余自适应 dom部分代码如下：

<div class="outDiv">
  <div class="left left1">
    <p>left</p>
  </div>
  <div class="right right1">
    <p>right</p>
    <p>right</p>
  </div>
</div>

1.float + margin

.left1 {
  float: left;
  width: 30px;
}

.right1 {
  margin-left: 40px;
}

2.float + overflow

.left2 {
  float: left;
  width: 30px;
  margin-right: 10px; /* 和上面那个左间距不一样，不用超出盒子宽度 */
}

.right2 {
  overflow: hidden;
}

3.table + table-layout

.outDiv3 {
  display: table;
  table-layout: fixed;
}
.left3,
.right3 {
  display: table-cell;
}

.left3 {
  width: 30px;
  padding-right: 10px;
}

4.flex(推荐)

.outDiv4 {
  display: flex;
}

.left4 {
  width: 30px;
  margin-right: 10px;
}
.right4 {
  flex: 1;
}

页面效果

具体可参考，源码里的fixWidth.css

不定宽布局

前提：不定宽度，其余自适应 dom部分代码如下：

<div class="outDiv">
  <div class="left left1">
    <p>left</p>
  </div>
  <div class="right right1">
    <p>right</p>
    <p>right</p>
  </div>
</div>

1.float + overflow

.left1 {
  float: left;
  margin-right: 10px;
}

.right1 {
  overflow: hidden;
}

2.table

.outDiv2 {
  display: table;
}
.left2,
.right2 {
  display: table-cell;
}
.left2 {
  width: 0.1%;
  padding-right: 10px;
}

3.flex

.outDiv3 {
  display: flex;
}

.left3 {
  margin-right: 10px;
}
.right3 {
  flex: 1;
}

页面效果

具体可参考，源码里的notFixWidth.css

等宽自适应布局

前提：等宽自适应 dom修改为

<div class="outDiv outDiv1">
  <div class="column">
      <p>1</p>
  </div>
  <div class="column">
      <p>2</p>
  </div>
  <div class="column">
      <p>3</p>
  </div>
  <div class="column">
      <p>4</p>
  </div>
</div>

1.float

.outDiv1 {
  margin-left: -20px;
  overflow: hidden; /*清除浮动*/
}
.outDiv1 .column {
  float: left;
  width: 25%;
  padding-left: 20px;
  box-sizing: border-box;
}

2.table

.outDiv-fix { /*单独加入dom最外层的*/ 
  margin-left: -20px;
}
.outDiv2 {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.outDiv2 .column {
  display: table-cell;
  padding-left: 20px;
}

3.flex

.outDiv3 {
  display: flex;
}

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

页面效果

具体可参考，源码里的equallyWidth.css

文中如有错误，欢迎在评论区指正