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

Question

I'm trying to mock up a twitter feed with Flexbox 我正在尝试使用Flexbox模拟Twitter提要

I've got so far but now I'm stuck! 到目前为止，我已经陷入困境！

I'd like for each li item to stretch vertically with flexbox to match the height of the longest tweet, which I have done. 我希望每个li项目都可以通过flexbox垂直拉伸，以匹配最长的tweet的高度。

Now I'm trying to get the images to align to the bottom of each of its parents li element (so you don't see the blue underneath any of the images). 现在，我正在尝试使图像与它的每个父级li元素的底部对齐（因此您不会在任何图像下方看到蓝色）。

Does anyone have any ideas of where im making a mistake please? 请问有人对我在哪里犯错有什么想法吗？

Full code on Codepen: https://codepen.io/anon/pen/mvGaXQ 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

Have you tried to set you li position to relative and then setting the img to position absolute? 您是否尝试过将li位置设置为相对位置，然后将img设置为绝对位置？ I also set a min-height to the li for the images to display properly. 我还为li设置了最小高度，以使图像正确显示。

li: 李：

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;
}

img: IMG：

.media img {
  max-width:100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

Answer 2

You might want to play with display: flex; 您可能要玩display: flex; ; ; Then make the children which can have a bit different height to flex: 1 ; 然后让可以flex: 1一些高度的孩子flex: 1 ;

For your case, Make the parent ul li {display: flex; flex-direction: column;} 对于您的情况，请让父母ul li {display: flex; flex-direction: column;} ul li {display: flex; flex-direction: column;} ; ul li {display: flex; flex-direction: column;} ; then 然后

.tweet,
.timePosted {
  flex: 1;
}

Here's a working example. 这是一个有效的例子。 https://codepen.io/anon/pen/LazPpE https://codepen.io/anon/pen/LazPpE

Also if you want to learn more about flex , I highly recommend you to visit this link and this game . 另外，如果您想了解有关flex更多信息，我强烈建议您访问此链接和该游戏。

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

问题描述

2 个解决方案

解决方案1
0 2019-03-11 16:07:58

解决方案2
0 已采纳 2019-03-11 16:11:48

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

问题描述

2 个解决方案

解决方案1 0 2019-03-11 16:07:58

解决方案2 0 已采纳 2019-03-11 16:11:48

解决方案1
0 2019-03-11 16:07:58

解决方案2
0 已采纳 2019-03-11 16:11:48