首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用flexbox将元素与底部对齐

使用flexbox将元素与底部对齐
EN

Stack Overflow用户
提问于 2015-06-23 18:56:14
回答 4查看 721.8K关注 0票数 546

我和几个孩子有一个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可以做到这一点,但我不能让它工作。

EN

回答 4

Stack Overflow用户

发布于 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

票数 180
EN

Stack Overflow用户

发布于 2018-03-21 01:33:32

对flexbox不太确定,但是你可以使用position属性。

设置父div position: relative和子元素,可以是<p><h1>等。设置position: absolutebottom: 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;
}

Code pen here.

票数 5
EN

Stack Overflow用户

发布于 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;
}
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31000885

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档