我为客户创建了一个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。
答案 0 :(得分：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>
答案 1 :(得分：1)
使用flexbox的一个实现，并大大减少内容周围的容器元素数量，您可以实现这一目标：
<div onkeydown="return (event.keyCode!=13);">
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
</div>
.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元素占用容器中的所有剩余空间。
答案 2 :(得分：0)
您可以在帖子底部添加人工填充。比如padding-bottom: 3em;，然后在帖子上点position:relative，在链接上点position:absolute;。设置bottom:0或.5em，并始终将该链接放在容器的底部。您也可以尝试使用Foundation的插件＆＃34; Equalizer＆＃34; http://foundation.zurb.com/sites/docs/equalizer.html这应该给你正确的错觉。