我和几个孩子有一个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可以做到这一点,但我不能让它工作。
发布于 2015-06-23 20:06:45
您可以使用display: flex将元素定位到底部,但我认为在这种情况下不希望使用flex,因为它会影响所有元素。
要使用flex将元素定位到底部,请尝试执行以下操作:
.container {
display: flex;
}
.button {
align-self: flex-end;
}
最好的方法是将按钮设置为position: absolute并将其设置为bottom: 0
,或者您也可以将按钮放在容器外部,然后使用负transform: translateY(-100%)
将其放入容器中,如下所示:
.content {
height: 400px;
background: #000;
color: #fff;
}
.button {
transform: translateY(-100%);
display: inline-block;
}
检查此JSFiddle
发布于 2018-03-21 01:33:32
对flexbox不太确定,但是你可以使用position属性。
设置父div
position: relative
和子元素,可以是<p>
或<h1>
等。设置position: absolute
和bottom: 0
。
示例:
index.html
<div class="parent">
<p>Child</p>
</div>
style.css
.parent {
background: gray;
width: 10%;
height: 100px;
position: relative;
}
p {
position: absolute;
bottom: 0;
}
发布于 2021-06-23 08:54:01
如果能够修改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;
}
https://stackoverflow.com/questions/31000885
复制相似问题