cssだけを使用してこのbtn-groupをボトムアライメントするにはどうすればよいですか？

現在、私は次のようになり、2列になったのdivの一連の持っている：私はボトム揃え、それは次のようになりますので、PDF/XMLボタングループをしたいcssだけを使用してこのbtn-groupをボトムアライメントするにはどうすればよいですか？

：

を

これは、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>

そして、これが役に立つ場合は、ここで私は、2列にこれらのdivのを作るために作られたCSSの抜粋です：

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

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

残念ながら、私は、HTMLを変更することはできません。これは、HTMLテンプレートを使用してCSSの変更のみを許可しなければならないWordPressサイトのように考えてください。

私は何をお勧めしますか？

出典

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フレックスボックスアイテム（*同じコンテナ*の下）の1つの有用な特性は、ラインごとに同じ高さ（*最も高いもの*）を共有することです。それぞれの内部には '.media-body'も' display：flex'（*新しいフレックスボックス*）でも今回は垂直に設定し、中の要素（* '.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でmin-heightを試しましたが、ボタングループを押し下げるだけです。彼らはまだ整列していない – kane

は、CSSで '！important'を必要とするかもしれませんか？ – scoopzilla

また、.article-summary.mediaのmin-heightを試してみたところ、各セルの下の余白が広げられましたが、ボタングループはまったく動かない – kane

私は最も簡単な方法は絶対positioiningでのmin-heightを使用することであると仮定します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

あなたは（擬似コードで）フレキシボックスまたはを使用するか...

隣接する列を作ります同じ高さ（matchHeight.jsのようなjsプラグインを使用）

セットarticle-summary〜position: relative

bottom: 0でボタングループの絶対位置を絶対に下にします。

padding-bottomをarticle-summaryに調整して、ボタングループがコンテンツに重ならないようにします。

出典

2017-01-23 19:22:04 Davey

cssだけを使用してこのbtn-groupをボトムアライメントするにはどうすればよいですか？

答えて

関連する問題