Question

目前，我有一系列div，我变成了2列，看起来像这样：

我想底部对齐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分为两列：

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

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

不幸的是，我无法更改html。可以把它想象成一个wordpress网站，你必须使用他们的html模板并且只允许进行css更改。

你建议我做什么？

Answer 1

你应该使用弹性框

＆＃13;

node -v

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

我认为这是最简单的方法。或者您可以为article-summary-media DIV添加高度，然后将btn-group放在靠近底部的位置？

Answer 3

您可以使用flexbox 或（伪代码）...

使相邻列的高度相等（使用像matchHeight.js这样的js插件）

将article-summary设为position: relative。

使用bottom: 0将您的按钮组位置设置在底部。

调整padding-bottom的{{1}}，以便按钮组不会重叠内容。

如何仅使用css底部对齐此btn-group？

3 个答案: