logo标签列表

在flexbox中将元素对齐到底部，而不使用position:absolute

htmlcssflexbox
5

请查看这里的jsfiddle：https://jsfiddle.net/q3ob7h1o/1/

或者如果您更愿意，可以直接在此处阅读：

代码

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.content {
  background: beige;
}
.footer {
  background: teal;
}
<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

我想要做什么

我想让.footer div对齐到每个.tile元素的底部，这样无论每个tile中的内容量大小如何，页脚都能够对齐。

我知道可以在页脚上使用position: absolute，但我宁愿避免这样做，因为页脚的高度可能是未知的。

我尝试将.tile本身变成一个flexbox，并将其方向设置为列，但这并没有起作用。我也尝试将每个tile变成一个table-cell，但这也没有起作用。

让我感到困惑的是，我试图定位一个已存在的flexbox子元素中的元素。任何应用于.tile的flexbox属性都会应用于.footer。

非常感谢您的帮助 :)

2
可能是使用flexbox将元素对齐到底部的重复问题。 - Mosh Feu
1
区别在于我已经有了一个 flexbox。我想对其中一个 flexbox 子元素进行对齐。 - Jonathon Blok
一旦您已经熟悉了flexbox，CSS Tricks的这个单页非常有用：flexbox（左侧为flex容器，右侧为flex项目）。 - FelipeAls
1个回答
4
请尝试以下解决方案： 

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction:column;
}
.content {
  background: beige;
}
.footer {
  background: teal;

}
<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

你可以在这里找到更新的fiddle代码：https://jsfiddle.net/q3ob7h1o/2/

1
太好了，非常感谢！我缺少的部分是 justify-content: space-between。 - Jonathon Blok
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接