底部对齐自动高度父级中的图像

Question

我有两个高度相同但内容不同的div。此内容是使用CMS动态制作的。但是我想让图像和按钮始终位于div的底部。我怎么能做到这一点？因为如果我使用固定的高度我只能使它工作，我从不使用高度：auto;

这是我的HTML / CSS代码段

＆＃13;

＆＃13;

.box:nth-of-type(2n+1) {
	margin-right: 10%;
}

.box {
	width: 45%;
	height: auto;
	background-color: #ffffff;
	box-shadow: 0 15px 14px -3px #d1daeb;
}

.box a {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: #602b96;
	padding: 15px 50px;
	text-decoration: none;
}

.box a:hover {
	color: #ffffff;
}

.box div {
	padding: 35px 40px 0px 40px;
}

.box img {
	padding-top: 35px;
	width: 100%;
}

＆＃13;

<div class="box">
  <div>
    <h2>Tittle of my div</h2>
    <hr>
    <span class="clearfix"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="buttonArticle" href="#">VIEW</a>
  </div>
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>


<div class="box">
  <div>
    <h2>Tittle of my div</h2>
    <hr>
    <span class="clearfix"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="buttonArticle" href="#">VIEW</a>
  </div>
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>

＆＃13;

＆＃13;

＆＃13;

现在的样子：

我该怎么做？

Answer 1

你可以通过flex来做到这一点。这些是我添加的样式

body {
    margin:0;
    display: flex;
}
.box {
    display: flex;
    flex-direction: column;
}
.box img {
    margin-top: auto;
    padding-top: 35px;
    width: 100%;
}

＆＃13;

＆＃13;

body {
margin:0;
display: flex;
}

.box:nth-of-type(2n+1) {
	margin-right: 10%;
}

.box {
    display: flex;
    flex-direction: column;
	width: 45%;
	height: auto;
	background-color: #ffffff;
	box-shadow: 0 15px 14px -3px #d1daeb;
}

.box a {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: #602b96;
	padding: 15px 50px;
	text-decoration: none;
}

.box a:hover {
	color: #ffffff;
}

.box div {
	padding: 35px 40px 0px 40px;
}

.box img {
    margin-top: auto;
	padding-top: 35px;
	width: 100%;
}

＆＃13;

<div class="box">
  <div>
    <h2>Tittle of my div</h2>
    <hr>
    <span class="clearfix"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="buttonArticle" href="#">VIEW</a>
  </div>
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>


<div class="box">
  <div>
    <h2>Tittle of my div</h2>
    <hr>
    <span class="clearfix"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="buttonArticle" href="#">VIEW</a>
  </div>
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flex实现此目的，并更改一些html

＆＃13;

＆＃13;

.box-wrapper {
    display: flex;
    align-items: stretch;
}
.box:nth-of-type(2n+1) {
	margin-right: 10%;
}

.box {
	  width: 45%;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 15px 14px -3px #d1daeb;
    align-items: start;
    display: flex;
    flex-direction: column;
}

.box a {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: #602b96;
	padding: 15px 50px;
	text-decoration: none;
}

.box a:hover {
	color: #ffffff;
}

.box div {
	padding: 35px 40px 0px 40px;
}

.box img {
	padding-top: 35px;
	width: 100%;
}
.mt-auto {
  margin-top: auto;
}
.p-0 {
  padding: 0 !important;
}

＆＃13;

<div class="box-wrapper">
<div class="box">
  <div>
    <h2>Tittle of my div</h2>
    <hr>
    <span class="clearfix"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    
  </div>
  <div class="mt-auto p-0">
  <a class="buttonArticle" href="#">VIEW</a>
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
  </div>
</div>


<div class="box">
  <div>
    <h2>Tittle of my div</h2>
    <hr>
    <span class="clearfix"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    
  </div>
  <div class="mt-auto">
  <a class="buttonArticle" href="#">VIEW</a>
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;