如何解决水平对齐三个元素的问题,其中中间元素增长以占用可用空间
我的目标是水平对齐三个元素,其中中间元素是一个 <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>
解决方法
最好的方法是使用 CSS Flexbox。 CSS Tricks 的人对这项技术有really good guide。
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%。我希望这能澄清任何混淆。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。