如何僅使用CSS底部對齊該btn組？

Question

目前，我有一個div序列，變成了兩個列，如下所示：

我想使PDF / XML按鈕組底部對齊，所以它看起來像這樣：

這是html的樣子：

<div class="media-list">
  <div class="article-summary media">
    <div class="media-body">
      <h3 class="media-heading">
        <a href="">
           Boosting SRL for Recommendation Systems
        </a>
      </h3>
      <div class="meta">
        <div class="authors">
          Kaushik Roy
        </div>
      </div>
      <div class="btn-group" role="group">
        <a class="galley-link btn btn-default role=" button"="" file"="" href="">
          PDF
        </a>
        <a class="galley-link btn btn-default role=" button"="" file"="" href="">
          XML
        </a>
      </div>
    </div>  
  </div>
  <div class="article-summary media">
    ...
  </div>
  <div class="article-summary media">
    ...
  </div>
</div>

如果有幫助，請使用以下CSS片段，將這些div分為2列：

.media {
  float: left;
  width: 50%;
  margin-top: 0;
}

.media:nth-child(odd) {
  clear: left;
}

不幸的是，我無法更改html。 可以將其視為一個wordpress網站，您必須使用其html模板並且僅允許進行CSS更改。

你推薦我做什么？

Answer 1

您應該使用彈性盒

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .media-list{ display:flex; flex-wrap:wrap; } .media { margin-top:0; margin-bottom:2em; width: 50%; flex:1 auto; } .media-body{ display:flex; flex-direction:column; height:100%; width:auto; } .media-body > .meta{ flex:1; } 

 <div class="media-list"> <div class="article-summary media"> <div class="media-body"> <h3 class="media-heading"> <a href=""> Boosting SRL for Recommendation Systems </a> </h3> <div class="meta"> <div class="authors"> Kaushik Roy </div> </div> <div class="btn-group" role="group"> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> PDF </a> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> XML </a> </div> </div> </div> <div class="article-summary media"> <div class="media-body"> <h3 class="media-heading"> <a href=""> ADE from EHR data </a> </h3> <div class="meta"> <div class="authors"> Kaushik Roy </div> </div> <div class="btn-group" role="group"> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> PDF </a> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> XML </a> </div> </div> </div> <div class="article-summary media"> <div class="media-body"> <h3 class="media-heading"> <a href=""> SLR with Hidden Data </a> </h3> <div class="meta"> <div class="authors"> Kaushik Roy </div> </div> <div class="btn-group" role="group"> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> PDF </a> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> XML </a> </div> </div> </div> <div class="article-summary media"> <div class="media-body"> <h3 class="media-heading"> <a href=""> Scholarly Associations and the Economic Viability of Open Access Publishing </a> </h3> <div class="meta"> <div class="authors"> Kaushik Roy Kaushik Roy </div> </div> <div class="btn-group" role="group"> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> PDF </a> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> XML </a> </div> </div> </div> </div> 

Answer 2

 <div class="article-summary media"> <div class="media-body"> <h3 class="media-heading"> <a href=""> Boosting SRL for Recommendation Systems </a> </h3> <div class="meta" style="min-height: XXXpx;"> <div class="authors"> Kaushik Roy </div> </div> <div class="btn-group" role="group"> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> PDF </a> <a class="galley-link btn btn-default role=" button"="" file"="" href=""> XML </a> </div> </div> </div> 

我認為這是最簡單的方法。 或者，您可以在article-summary-media DIV中增加一個高度，然后將btn-group放置在底部附近？

Answer 3

您可以使用flexbox 或 （使用偽代碼）...

使相鄰列的高度相等（使用像matchHeight.js這樣的js插件）

將article-summary設置為position: relative 。

使您的按鈕組位置絕對位於底部， bottom: 0 。

調整article-summary padding-bottom ，以使按鈕組不與內容重疊。