三列布局，底部有圖像

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

希望這有助於

保重和快樂編碼