Снизу выровнять изображение в пределах родительского автоматического значения высоты

Question

У меня есть два div с одинаковой высотой, но разным содержанием.Этот контент динамически сделан с помощью CMS.Однако я хочу, чтобы изображение и кнопка всегда были внизу div.Как я могу сделать это?потому что я работаю только с фиксированной высотой, я никогда не работаю с высотой: auto;

, вот мой фрагмент HTML / CSS

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

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

Вот как это выглядит сейчас:

Как мне это сделать?это?

Answer 1

Вы можете достичь этого с помощью flex и изменить значение html

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

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

Answer 2

Вы можете сделать это с помощью flex.Это стили, которые я добавил

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

---

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

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