html - 将元素垂直对齐到 div 列的底部

Question

我为一个客户创建了一个 Wordpress 主题，并设法允许他们在他们的页面上创建栏目。然而，列的高度略有不同，使按钮看起来很奇怪。大家可以自己看看here .该网站是荷兰语的，但阅读更多按钮显然没有相互对齐。

我创建了 a JSFiddle我设法使列的高度相同，但无法将链接与 div 的底部对齐。我试过 display: table-cell、table-row 等

.column-main {
  display: table-row;
}

.column-page-column {
  width: 32%;
  display: table-cell;
}

.column-page-column p.call-to-action {
  // thought this might, work but it doesn't
  display: table-cell;
  vertical-align: bottom;
}

article {border: 1px solid red;}

<div class="column-main hentry-wrapper column-main-3">
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 1</h3>
      </header>
		  <div class="entry-content">
			  <p>Blah blah blah</p>
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
		  </div>
    </div>
  </article>
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 2</h3>
      </header>
		  <div class="entry-content">
			  <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend rhoncus malesuada. Donec a risus nec nunc dignissim egestas eget ac erat. Nullam elementum sagittis sollicitudin. 
        </p>
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
		  </div>
    </div>
  </article>
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 2</h3>
      </header>
		  <div class="entry-content">
			  <p>
          Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words,
          and so on, etc etc etc.
        </p>
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
		  </div>
    </div>
  </article>

  <div style="clear:both;"></div>
</div>

是否可以将链接向下移动以使它们彼此对齐？我控制 Wordpress 主题，因此我可以根据需要更改 html。

Answer 1

我不得不稍微重构一下你的代码。
除了这种方法，使用 Flexbox 也是一个不错的选择。

看看这个jsFiddle

.column-main {
  display: table-row;
}

.column-page-column {
  width: 32%;
  display: table-cell;
  position: relative;
  padding-bottom: 30px;
}

.column-page-column p.call-to-action {
  // thought this might, work but it doesn't
  display: table-cell;
  vertical-align: bottom;
}

div.footer {
  position: absolute;
  bottom: 0px;
  
}

article {border: 1px solid red;}

<div class="column-main hentry-wrapper column-main-3">
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 1</h3>
      </header>
		  <div class="entry-content">
			  <p>Blah blah blah</p>
		  </div>
      <div class="footer">
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
      </div>
    </div>
  </article>
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 2</h3>
      </header>
		  <div class="entry-content">
			  <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend rhoncus malesuada. Donec a risus nec nunc dignissim egestas eget ac erat. Nullam elementum sagittis sollicitudin. 
        </p>
		  </div>
      <div class="footer">
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
      </div>
    </div>
  </article>
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 2</h3>
      </header>
		  <div class="entry-content">
			  <p>
          Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words,
          and so on, etc etc etc.
        </p>
		  </div>
      <div class="footer">
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
      </div>
    </div>
  </article>

  <div style="clear:both;"></div>
</div>