我有div一些孩子:
div
<div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div>
我想要以下布局:
------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | -------------------
无论文本中有多少文本,p我都希望.button始终将其始终停留在底部,而不会将其从流程中移出。我听说这可以通过Flexbox实现,但我无法使其正常工作。
p
.button
您可以使用自动边距
在通过justify-content和对齐之前align-self,任何正的自由空间都会分配给该维度中的自动边距。
justify-content
align-self
因此,您可以使用以下一种(或两种):
p { margin-bottom: auto; } /* Push following elements to the bottom */ a { margin-top: auto; } /* Push it and following elements to the bottom */ .content { height: 200px; border: 1px solid; display: flex; flex-direction: column; } h1, h2 { margin: 0; } a { margin-top: auto; } <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some text more or less</p> <a href="/" class="button">Click me</a> </div>
或者,您可以在a增长之前使元素填充可用空间:
a
p { flex-grow: 1; } /* Grow to fill available space */ .content { height: 200px; border: 1px solid; display: flex; flex-direction: column; } h1, h2 { margin: 0; } p { flex-grow: 1; } <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some text more or less</p> <a href="/" class="button">Click me</a> </div>