html - 如何将 btn-group div 对齐到右上角？

Question

这是我正在使用的 html(我无法更改):

<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 class="media-body">
    ....
  </div>
</div>

现在是这个样子

这是我想要的样子

我正在尝试将 PDF|XML btn-group 推到右上角。如果 h3.media-heading 很长，它应该在 btn-group 之前停止并继续下一行，而不是将 btn-group 向下推

Answer 1

这是我目前的解决方案，但我不确定是否有任何我没有想到的副作用

.media-body {
  position: relative;
}

.media-heading {
  float: left;
  padding-right: 150px;
}

.meta {
  float: left;
  clear: left;
}

.media-body > div.btn-group {
  position: absolute;
  right: 0;
}

基本上，我将所有 .media-heading 和 .meta 都 float 到左侧，并尝试使用绝对位置来放置 btn-group。我向 btn-group 的容器添加了一个相对位置，即 .media-body，因为我了解到这有助于包含元素的绝对定位，否则，它会飞出容器并飞到整个页面的右侧。