在自动高度父级内底部对齐图像

Question

我有两个高度相同但内容不同的 div。此内容是使用 CMS 动态制作的。但是我想让图像和按钮始终位于 div 的底部。我怎样才能做到这一点？因为我只有在使用固定高度时才能让它工作，所以我从不使用 height: 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 做到这一点。这些是我添加的样式

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>

Answer 2

您可以使用 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>

在自动高度父级内底部对齐图像

Bottom align image within auto height parent

html

css

css-position