Css 当其中一个div为空时，将4个div平行对齐

我是html的新手，所以请耐心等待

我试图平行对齐4个div，其中第一个、第三个和第四个div是静态的，第二个div是空的，我需要它占据剩余的位置，例如“width:auto”。 我不想用表格来解决这个问题。 有没有办法用div解决这个问题

HTML:

---

您需要更改元素的顺序：

<div class="container">
  <div class="first content">first</div>
  <div class="content">third</div>
  <div class="content">fourth</div>
  <div class="empty"></div>
</div>

---

如果您准备在空div下面添加，则可以使用以下命令：

<div class="empty">
    &nbsp;
</div>

这是4个div中具有类“empty”的那一个将自动扩展以填充可用空间，其他div大小都将为142 px

<div class="container">
  <div class="first content">first</div>
  <div class="content">third</div>
  <div class="content">fourth</div>
  <div class="empty"></div>
</div>

.content {
  float: right;
  width: 142px;
}

.first {
  float: left;
}

.empty {
  overflow: auto;
}

<div class="empty">
    &nbsp;
</div>

.container {
    width:1020px;
    height:40px;
    display:table;
    width:100%;
}
.container div {
    height:40px;
    display:table-cell;
}
.content {
    background-color:#2cc2e7;
    width:142px;
    max-width:142px;
}
.empty {
    background-color:#f1d486;
}