水平对齐三个元素的问题，其中中间元素增长以占用可用空间 space

Question

我的目标是水平对齐三个元素，其中中间元素是一个 <hr>，占据所有可用的 space(width: 100%) 将外部两个元素推到两侧.

结果将是这样的：AAA-------BBB，其中 <hr> 元素用连字符表示。

我试过的

我尝试过 display: inline-block 但没有成功。

div {
  display: inline-block;
  background: #777;
}

hr {
  width: 100%;
}

<div>
  <h1>AAA</h1>
  <hr />
  <article>
    <p>BBB</p>
  </article>
</div>

Answer 1

解决此问题的最佳方法是使用 CSS Flexbox。 CSS Tricks 的人对技术有 really good guide。

A Complete Guide to Flexbox by Chris Coyier

flex-grow: This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.

div {
  display: flex;
  background: #777;
}

hr {
  flex-grow: 1;
}

<div>
  <h1>AAA</h1>
  <hr />
  <article>
    <p>BBB</p>
  </article>
</div>

display: inline-block 属性将不起作用，因为它是一个内联元素，您想要扩展到容器的 100% 宽度，而不是 100 可用的 % space。我希望这能澄清任何困惑。

水平对齐三个元素的问题，其中中间元素增长以占用可用空间 space

A problem with aligning three elements horizontally, where the middle element grows to take up available space

css

display

我试过的