我有一个包含3列的div。在每个div中,我都有一段文字和一张图片。是否可以将这些图片对齐到同一高度?现在图片总是在文字下面,但是每列的文字长度不同。我希望将这些图片放在每列底部。
谢谢,
Carolin
#content_row{
margin-top:150px;
margin-left:10px;
margin-right:10px;
}
#content_col{
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
padding-bottom: 30px;
}
#content_col:hover{
-webkit-transform: scale(1);
transform: scale(1);
-moz-box-shadow: 0 0 50px black;
-webkit-box-shadow: 0 0 50px black;
box-shadow: 0 0 50px black;
}
.tile-img{
max-width: 100%;
margin-left: auto;
margin-right:auto;
vertical-align: bottom;
}
<div class="row" id="content_row">
<div class="col-sm-4" id="content_col"><h3>Test</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
<div class="col-sm-4" id="content_col"><h3>Test2</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
<div class="col-sm-4" id="content_col"><h3>Test3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
</div>
</div>