2017-01-27 1 views
0

これは(私は変更することはできません)私が働いているhtmlです:btn-group divを右上に揃えるにはどうすればよいですか?

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

これは今

enter image description here

これは私がそれを見てみたい方法ですようにそれが見えるものです

enter image description here

私はPDF | XML btn-groupを右上にプッシュしようとしています。 h3.media-headingが長い場合は、btn-groupを停止し、btn-groupを押し下げるのではなく、次の行を続ける必要があります。

+0

+0

これは簡単ですが、残念ながら、私はhtmlを変更することはできません.cssの変更のみです。 – kane

+0

ブートストラップを使用していますか?もしそうなら、どのバージョン? –

答えて

0

ここに私の現在の解決策があります私は

.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-見出しと.METAフロート、と私はBTN-グループを配置するために、絶対位置を使用するようにしてください。 Btnグループのコンテナに相対位置を追加します。これは、メディアの絶対位置を保持するのに役立つことを学んだためです。そうでなければ、コンテナからページ全体の右側に飛び出します。

関連する問題