我和一些孩子有一个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中有多少文本，我希望始终将.按钮粘在底部，而不将其从流中取出。我听说这可以用Flexbox实现，但我不能让它工作。
当前回答
如果可以修改HTML，可以将所有顶部元素包装在单独的div中，然后使用justify-content: space between。
就像这样:
<div class="content">
<div>
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
</div>
<a href="/" class="button">Click me</a>
</div>
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
其他回答
你可以使用汽车利润
在通过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 { 身高:200 px; 边框:1px实体; 显示:flex; flex-direction:列; ｝ H1, h2 { 保证金:0; ｝ 一个{ margin-top:汽车; ｝ < div class = "内容" > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些文本或多或少</p> <a href="/" class="button">点击我</a> < / div >
或者，你也可以让a之前的元素填充可用空间:
p { flex-grow: 1; } /* Grow to fill available space */
.content { 身高:200 px; 边框:1px实体; 显示:flex; flex-direction:列; ｝ H1, h2 { 保证金:0; ｝ p { flex-grow: 1; ｝ < div class = "内容" > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些文本或多或少</p> <a href="/" class="button">点击我</a> < / div >
如果可以修改HTML，可以将所有顶部元素包装在单独的div中，然后使用justify-content: space between。
就像这样:
<div class="content">
<div>
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
</div>
<a href="/" class="button">Click me</a>
</div>
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
在将显示设置为flex时，只需使用flex属性标记哪些内容可以增长，哪些内容不能增长。
Flex财产
div.content { 身高:300 px; 显示:flex; flex-direction:列; ｝ div.up { flex: 1; ｝ div.down { flex:没有; ｝ < div class = "内容" > < div class = " " > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些或多或少的文本</p> < / div > < div class = "”> <a href="/" class="button">点击我</a> < / div > < / div >
您可以使用display: flex来将一个元素定位到底部，但我认为在这种情况下您不应该使用flex，因为它将影响您的所有元素。
要使用flex将一个元素定位到底部，请尝试以下操作:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
你最好的选择是设置位置:绝对的按钮，并将其设置为底部:0，或者你可以将按钮放在容器之外，并使用负变换:平移(-100%)将其带入容器，如下所示:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
检查这个JSFiddle
<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>
CSS注意事项:
根据需要更改.content的高度 由于flex:1属性，按钮将占据底部的整个空白区域，使整个区域可单击。我建议将按钮包装在div或span中
CSS
.content {
display: flex;
flex-direction: column;
height: 100vh;
}
.button {
display: flex;
flex: 1;
align-items: flex-end;
}
https://codepen.io/alokjain_lucky/pen/MWooJGw
