css_多列_布局——定宽+自适应

html

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

1. margin + float

.left {
  float: left;
  width: 100px;
  background-color: blue;
}
.right {
  margin-left: 120px;
  background-color: red;
}
           

2. float + overflow

.left {
  float: left;
  width: 100px;
  background-color: blue;
}
.right {
  overflow: hidden;
  background-color: red;
}
           

3. table

.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left,
.right {
  display: table-cell;
  background-color: red;
}
.left {
  width: 100px;
  padding-right: 20px;
  background-color: blue;
}
           

4. flex

.parent {
  display: flex;
}
.left {
  width: 100px;
  margin-right: 20px;
  background-color: red;
}
.right {
  flex: 1;
  background-color: blue;
}