如何仅使用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 ，以使按钮组不与内容重叠。