时间戳

首页 > 解决方案 > 水平对齐三个元素的问题，中间元素增长到占用可用空间

css - 水平对齐三个元素的问题，中间元素增长到占用可用空间

问题描述

我的目标是水平对齐三个元素，其中中间元素<hr>占据所有可用空间（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>

标签： cssdisplay

解决方案

解决这个问题的最好方法是使用 CSS Flexbox。CSS Tricks 的人对这项技术有很好的指导。

Chris Coyier 的 Flexbox 完整指南

flex-grow：这定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。

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% 的可用空间。我希望这可以澄清任何混淆。

推荐阅读