css - 三列布局，图像在底部

Question

我有一个三列布局。我需要在每个盒子的底部贴上一张图片。我该怎么做？

<div class="box">
   <div class="item1">hello <img src="example1.png" /></div>
   <div class="item1">test <img src="example2.png" /></div>
   <div class="item1">hi <img src="example3.png" /></div>
</div>

如果每个 div 的高度可变，我如何对齐底部的图像？

Answer 1

使用这样的东西

.item1 {
display:flex;
flex-direction: column;
}

 <div class="item1">
    <p>hello<p>
    <img src="example1.png" />
</div>

如果这也适用于其他 div，并且如果您希望这些 div 并排放置，则执行

.box {
display:flex;
}

希望对你有帮助

保重并快乐编码