html - 如何以中间 block 始终全宽的方式将三个内容 block 放在一行中？

Question

我有三个内容 block ，我想以中间 block 始终全宽的方式内联放置(填充第一个 block 和第三个 block 之间 100% 的空间)。

我怎样才能仅使用 HTML 和 CSS 实现这一点？

.row {
  border: 1px solid black;
  padding: 1px;
}
.one {
  border: 1px solid red;
  display: inline-block;
}
.two {
  border: 1px solid yellow;
  display: inline-block;
}
.three {
  border: 1px solid blue;
  display: inline-block;
  float: right;
}

<div class='row'>
  <div class='one'>One</div>
  <div class='two'>Two</div>
  <div class='three'>Three</div>
</div>

Answer 1

• 方法一

  设置父元素的display为flex，中间元素添加flex-grow: 1:

  .row {
      border: 1px solid black;
      padding: 1px;
      display: flex;
      text-align: center;
  }
  .one {
      border: 1px solid red;
  }
  .two {
      border: 1px solid yellow;
      flex-grow: 1;
  }
  .three {
      border: 1px solid blue;
  }

  <div class='row'>
      <div class='one'>One</div>
      <div class='two'>Two</div>
      <div class='three'>Three</div>
  </div>

---

• 方法 2

  设置父元素的display为table，子元素的display为table-cell .然后将中间元素的宽度设置为100%。

  .row {
    border: 1px solid black;
    padding: 1px;
    display: table;
    width: 100%;
    text-align: center;
  }
  .row > div {
    display: table-cell;
  }
  .one {
    border: 1px solid red;
  }
  .two {
    border: 1px solid yellow;
    width: 100%;
  }
  .three {
    border: 1px solid blue;
  }

  <div class='row'>
      <div class='one'>One</div>
      <div class='two'>Two</div>
      <div class='three'>Three</div>
  </div>

---

• 方法 3(但中间元素不会填充剩余空间)

  将第一个元素向左浮动，将第三个元素向右浮动，并在父元素上使用 text-align: center 使中间元素居中:

  .row {
    border: 1px solid black;
    padding: 1px;
    text-align: center;
  }
  .one {
    border: 1px solid red;
    float: left;
  }
  .two {
    border: 1px solid yellow;
    display: inline-block;
  }
  .three {
    border: 1px solid blue;
    float: right;
  }

  <div class='row'>
    <div class='one'>One</div>
    <div class='two'>Two</div>
    <div class='three'>Three</div>
  </div>