我有一个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 实现,但我无法让它发挥作用。
您可以使用自动边距 http://www.w3.org/TR/css-flexbox-1/#auto-margins
对齐之前通过justify-content http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content and align-self http://www.w3.org/TR/css-flexbox-1/#propdef-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
增长以填充可用空间:
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)