三列布局，底部有图像

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

希望这有助于

保重和快乐编码