Question

我正在尝试使用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>

Answer 1

您是否尝试过将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;
}

Answer 2

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

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

.tweet,
.timePosted {
  flex: 1;
}

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

如果您想进一步了解flex，我强烈建议您访问this link和this game。

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

2 个答案: