在flexbox li元素中底部对齐图像

时间:2019-03-11 15:36:12

标签: html css flexbox

我正在尝试使用Flexbox模拟Twitter提要

我已经走了,但是现在我被卡住了!

我希望每个li项目都可以使用flexbox垂直拉伸,以匹配最长的tweet的高度,这已经完成了。

现在,我正在尝试使图像与它的每个父级li元素的底部对齐(因此您看不到任何图像下方的蓝色)。

有人对我在哪里犯错误有任何想法吗?

Codepen上的完整代码: https://codepen.io/anon/pen/mvGaXQ

<html>
  <body>
    <div style="height:600px; color:#fff; padding:50px; background-color:#000;">
      <div id="example1"></div>
    </div>
  </body>
</html>

2 个答案:

答案 0 :(得分:0)

您是否尝试过将li位置设置为相对位置,然后将img设置为绝对位置?我还为li设置了最小高度,以使图像正确显示。

li:

max_column

img:

ul li {
  list-style:none;
  overflow:hidden;
  border:1px solid #dedede;
  margin:5px;
  position: relative;
  min-height: 550px;
  max-width:300px;
  display:inline-block;
  text-align: left;
  vertical-align:top;
  background-color: #417abd;
}

答案 1 :(得分:0)

您可能想玩display: flex;; 然后,使孩子的身高与flex: 1有所不同;

对于您的情况, 设为父母ul li {display: flex; flex-direction: column;};然后

.tweet,
.timePosted {
  flex: 1;
}

这是一个可行的例子。 https://codepen.io/anon/pen/LazPpE

如果您想进一步了解flex,我强烈建议您访问this linkthis game