やりたいこと
WordPressでよく出てくるカード型の一覧画面。
投稿する内容によって高さが変わったりしても、ボタンの位置や高さが揃うようにしたい
良くない例
<!-- ulは端折る -->
<li class="bl_card">
<a href="">
<figure class="bl_card_imgWrapper"></figure>
<div class="bl_card_body">
<h2 class="bl_card_ttl">タイトルが入ります。</h2>
<p class="bl_card_txt">
本文が入ります。本文が入ります。<br>
本文が入ります。本文が入ります。<br>
本文が入ります。本文が入ります。
</p>
<p class="el_btn">詳細はこちら</p>
</div>
<!-- /.bl_card_body -->
</a>
</li>
.bl_card {
width: 320px;
min-height: 420px;
}
.bl_card > a {
display: block;
height: 100%;
}
.bl_card_imgWrapper {
width: 100%;
height: 240px;
background: #999;
}
.bl_card_body {
padding: 20px;
background: #fff;
}
.bl_card_ttl {
margin-bottom: 16px;
}
.el_btn {
width: 200px;
height: 46px;
background: #999;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto 0;
}
修正後
HTMLは同じなので、CSSだけ変更
.bl_card {
width: 320px;
min-height: 420px;
}
.bl_card > a {
display: block;
height: 100%;
/* ①ここから追加 */
background: #fff;
padding-bottom: 64px;
position: relative;
}
.bl_card_imgWrapper {
width: 100%;
height: 240px;
background: #999;
}
.bl_card_body {
/* padding: 20px; */
padding: 20px 20px 8px; /*←padding-bottomを調整*/
background: #fff;
}
.bl_card_ttl {
margin-bottom: 16px;
}
.el_btn {
width: 200px;
height: 46px;
background: #999;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
/* margin: 20px auto 0; ←削除 */
/* ②ここから追加 */
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
}
●結果
考え方
背景の色をカード全体につける
ボタンを配置するための余白を取る
その余白の部分にposition: absolute;でボタンを配置する
↧