我和一些孩子有一个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实现,但我不能让它工作。
align-self的解决方案:弯曲端;对我来说没用,但如果你想使用flex,这个是有用的:
结果
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
| |
| |
| |
|link button |
-------------------
Code
注意:当“运行代码片段”时,你必须向下滚动才能看到底部的链接。
.content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 300px;
}
.content .upper {
justify-content: normal;
}
/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
border: 1px solid #ccc;
}
<div class="content">
<div class="upper">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>paragraph text</p>
</div>
<div class="bottom">
<a href="/" class="button">link button</a>
</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>
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
您可以使用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
我刚找到了解决办法。
对于那些对给出的答案不满意的人,可以使用flexbox尝试这种方法
CSS
.myFlexContainer {
display: flex;
width: 100%;
}
.myFlexChild {
width: 100%;
display: flex;
/*
* set this property if this is set to column by other css class
* that is used by your target element
*/
flex-direction: row;
/*
* necessary for our goal
*/
flex-wrap: wrap;
height: 500px;
}
/* the element you want to put at the bottom */
.myTargetElement {
/*
* will not work unless flex-wrap is set to wrap and
* flex-direction is set to row
*/
align-self: flex-end;
}
HTML
<div class="myFlexContainer">
<div class="myFlexChild">
<p>this is just sample</p>
<a class="myTargetElement" href="#">set this to bottom</a>
</div>
</div>