我如何才能使用css底部对齐此btn组？

目前，我有一个DIV序列就是我变成2列看起来像这样：我如何才能使用css底部对齐此btn组？

我想底部对齐的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更改。

你推荐我做什么？

来源

2017-01-23 kane

你试过添加内嵌样式到div'authors'？ ''这就是我要做的，它不漂亮，你可以添加另一个类，但它确实得到了预期的效果。 – scoopzilla

您应该使用柔性盒

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

来源

2017-01-23 19:22:14

这个优雅的解决方案工作得很好。谢谢！你真棒！ – kane

我会研究flexbox，但是您能否简单介绍一下为什么这会起作用？ – kane

@kane flexbox项目（*在同一个容器*下）的一个有用属性是它们每行共享相同的高度（*最高的*）。在每个内部，我们再次设置'.media-body'为'display：flex'（*一个新的flex box *），但是这次是垂直的，并且设置中间元素（*'.meta' *）占用尽可能多的尽可能的空间。（*其他元素根据其内容扩展*），因此它会将'.button-group'推到底部。 –

<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定位在底部附近？

来源

2017-01-23 18:40:24 scoopzilla

我尝试了.authors上的最小高度，但它只是按下按钮组。他们仍然没有对齐 – kane

可能需要一个'重要的'在CSS？ – scoopzilla

也尝试了.article-summary.media上的最小高度，并且这只是展开了每个单元格的底部边距，但按钮组根本不会移动 – kane

我想最简单的方法是使用最小高度绝对positioining：https://jsfiddle.net/v3vsmwgp/

.media-body{ 
    position:relative; 
    min-height:100px; 
} 
.btn-group{ 
    position:absolute; 
    bottom:0; 
}

来源

2017-01-23 19:19:17

这是一个很好的解决方案，但是根据我的经验，当内容超过最小高度或者内容太短时，使用'min-height'可能会失败。对于响应式网站，这很可能发生，因为内容高度通常会随着页面宽度而改变。 – Davey

您可以使用Flexbox的或（在伪代码）...

使相邻列等高（使用js插件，如matchHeight.js）

设置article-summary至position: relative。

使您的按钮组位置绝对在底部bottom: 0。

调整padding-bottom的article-summary，以便按钮组不重叠内容。

来源

2017-01-23 19:22:04 Davey

我如何才能使用css底部对齐此btn组？

回答

相关问题