将元素垂直对齐到 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

您可以在 post 的底部添加人工填充。说像 padding-bottom: 3em; 然后在 post 上创建 position:relative，在 link 上创建 position:absolute;。设置 bottom:0 或 .5em 并且应该始终将 link 放在容器的底部。您也可以尝试使用 Foundation 的插件 "Equalizer" http://foundation.zurb.com/sites/docs/equalizer.html 这应该会给您正确的错觉。

Answer 2

我不得不稍微重构一下你的代码。
除了这种方法，使用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>

Answer 3

使用 flexbox 的一种实现，并大大减少内容周围的容器元素的数量，您可以实现这一点：

.column-main {
    display: flex;
}
.column-page-column {
    width: 33%;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}
.column-page-column p {
    flex-grow: 1;
}

<div class="column-main">
    <article class="column-page-column">
        <h3 class="entry-title">Title 1</h3>
        <p>Blah blah blah</p>
        <a class="button" href="#">Read more</a>
    </article>
    <article class="column-page-column">
        <h3 class="entry-title">Title 2</h3>
        <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>
        <a class="button" href="#">Read more</a>
    </article>
    <article class="column-page-column">
        <h3 class="entry-title">Title 2</h3>
        <p>Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words, and so on, etc etc etc.</p>
        <a class="button" href="#">Read more</a>
    </article>
</div>

关键是flex-grow: 1，它告诉<p>元素占据容器中所有剩余的space。

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

Vertically align elements to the bottom of div columns

html

css

vertical-alignment