Question

我为客户创建了一个Wordpress主题，并设法允许他们在自己的页面上创建列。但是，列的高度略有不同，使按钮看起来很奇怪。你可以亲自看看here。该网站使用荷兰语，但阅读更多按钮显然彼此不一致。

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

＆＃13;

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

＆＃13;

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

＆＃13;

是否可以向下移动链接以使它们彼此对齐？我控制Wordpress主题，所以我可以在必要时更改html。

Answer 1

我不得不重新调整你的代码。
除了这种方法，使用Flexbox是另一个不错的选择。

看看这个jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

<div onkeydown="return (event.keyCode!=13);">
    <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
</div>

＆＃13;

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

＆＃13;

密钥为<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元素占用容器中的所有剩余空间。

Answer 3

您可以在帖子底部添加人工填充。比如padding-bottom: 3em;，然后在帖子上点position:relative，在链接上点position:absolute;。设置bottom:0或.5em，并始终将该链接放在容器的底部。您也可以尝试使用Foundation的插件＆＃34; Equalizer＆＃34; http://foundation.zurb.com/sites/docs/equalizer.html这应该给你正确的错觉。

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

3 个答案: