css - 在 bootstrap 4 或 css 上对齐不同大小的底部图像

Question

我使用 css align-xxxx:bottom 不工作，我想要不同高度的图像对齐底部

.width-book{
  width: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">
        	<div class="col-xs-4 text-center">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        	<div class="col-xs-4 text-center">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://prodimage.images-bn.com/pimages/9780553805444_p0_v5_s1200x630.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        	<div class="col-xs-4 text-center">
        		<a href="">
        			<figcaption class="figure-caption color-primary">A caption for image</figcaption> 
        			<img class="a width-book" src="http://shakespeareandcompany.com/files/isbn/9780007448036.jpg" data-holder-rendered="true">
        		</a>
        	</div>
        </div>
        </div>

我想要结果 image

Answer 1

使用 flex css:

.wrapper {
  position: relative;
  height: 500px;
  width: 1000px;
  display: flex;
  align-items: flex-end;
}

那里的例子:https://codepen.io/Czeran/pen/yPeGwO