カードレイアウトで、aタグをカードの一番下に固定位置で表示させたい。

初歩的な質問で、すみません。
カードレイアウトでイメージ、題名、コメント、最後にリンクをつけたいのですが、リンクテキストの位置がどうしても固定できません。
カードを複数並列にすると、カードのコメントの長さによってリンクテキストの位置が変わってしまいます。

カードの一番下から5PXのように配置したいのですが、どのようにすれば実現できますか？

リンクに、Classをつけて、Text-alignで動かそうかと試したり、
リンク自体にもClassをつけて、配置を変えられないか、displayなども試してみましたが、上手くいきません。

<HTML> <div class="flexbox"> <div class="card"> 　　　<img class="card-img" src="img/sourceimg.png" alt="sample pic"> 　　　<h3>題名</h3> 　　　<p>コメント</p> 　　　<p>コメント</p> 　<div class="card-link"> 　　　　<a class="links" href="りんくをいれます">こちらからアクセス</a> 　</div> </div> </div> <CSS> h3{ font-size:18px; color:orangered; padding:0px; }

.card-img{
width:100%;
height:auto;
}

.flexbox {
display: flex;
flex-wrap: wrap;
padding: 2px;
margin: 0 0 2px;
}

.flexbox > div {
background: rgb(241, 239, 236);
padding:0px;
flex: 1 0 300px;
margin: 10px 5px 10px 5px;

}

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょう。

CSS
1.flexbox > div {
2  background: rgb(241, 239, 236);
3  padding:0 0 2rem; /* 修正 */
4  flex: 1 0 300px;
5  margin: 10px 5px 10px 5px;
6  position: relative;  /* 追加 */
7}
8
9/* 以下追加 */
10.card-link {
11  position: absolute;
12  bottom: 5px;
13}

サンプル
https://codepen.io/hatena19/pen/dyyeJpV

解説
cardクラス(=.flexbox > div)に position: relative; card-linkクラスに position: absolute; を設定することで、card-link を card の固定位置に配置できます。bottom: 5px; で下辺から5px上に配置します。
これだけだと、card内の他の要素と重なるので、paddingで下辺に間隔をあけてます。

投稿2019/11/07 11:08

編集2019/11/08 00:35