定宽+自适应

html

  <div class="parent">
    <div class="left">
      <p>left</p>
    </div>
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>

css

p {
  margin: 0;
  padding: 0;
}

.left {
  background: #ccc;
}

.right {
  background: #f2f2f2;
}

.left,
.right {
  padding: 10px;
}

float + margin

.left {
    float: left;
    width: 80px;
}

.right {
    margin-left: 100px;
}

float+overflow

.left {
    float: left;
    width: 80px;
}

.right {
    overflow: hidden;
}

table

.parent {
display: table;
width: 100%;
table-layout: fixed;
}

.left,
.right {
display: table-cell;
}

.left {
width: 80px;
}

flex

.parent {
display: flex;
}

.left {
width: 80px;
}

.right {
flex: 1;
}

不定宽+自适应

html

<div class="parent">
    <div class="left">
      <p>left</p>
    </div>
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>

css

p {
  margin: 0;
  padding: 0;
}

.left {
  background: #ccc;
}

.right {
  background: #f2f2f2;
}

.left,
.right {
  padding: 10px;
}

float+overflow

.left {
    float: left;
}

.right {
    overflow: hidden;
}

table

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/* 方法一*/
.left,
.right {
    display: table-cell;
}

/*方法二*/
.left{
    width:0.1%;
}
.left p{
    width:80px;
}

flex

.parent {
    display: flex;
}

.left p{
    width: 80px;
}

.right {
    flex: 1;
}

等宽布局

计算方法： C：总宽度 W：单个宽度 G：间距 N：个数

C=(W*N)+G*(N-1)
C=(W+G)*N-G
C+G=(W+G)*N

html

<div class="parent">
    <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>

css

p {
  margin: 0;
  padding: 0;
  background: #f2f2f2;
}

float

.parent {
    margin-left: -20px;
}

.column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;

}

table

html

<div class="parent-fix">
    <div class="parent">
      <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>
</div>

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

flex

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

等高布局

html

  <div class="parent">
    <div class="left">
      <p>left</p>
    </div>
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>

css

p {
  margin: 0;
  padding: 0;
}

.left {
  background: #ccc;
}

.right {
  background: #f2f2f2;
}

table

  .parent{
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    .left,.right{
      display: table-cell;
    }
    .left{
      width: 100px;
      border-right: 20px solid transparent;
      background-clip: padding-box;
    }

flex

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

float

.parent {
    overflow: hidden;
}

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

.right {
    overflow: hidden;
}

.left,
.right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}