[tomohanano]

パネルブロック＞項目＞垂直レイアウトのリンクボタンですが、
写真のように真ん中のテキストの量に応じて高さが変わりますよね？

これをどうにかして同じ高さに揃えたいのですが、
この場合はCSSでどうにか出来るものでしょうか？

少なくとも、Snow Monkey側の設定では特にいじれなさそうでした。

ちなみに、通常のコーディングであれば、

<div class="wrap">
<div class="item">

テキスト
<div class="btn"><a href="#">高さを揃えたいボタン</a></div>
</div>
</div>

に対して、

.wrap {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.btn {
margin-top: auto;
}

などとして、高さを揃えると思います。

♥ 0

いいねをした人: 居ません

[Olein_jp]

この現象を再現する時間がない場合も多いので、可能であれば共有できるURLがあると嬉しいですねー

あと、各種バージョンなども記載をされた方が返答者に優しいかと思います。（あえて書かない理由があるのならばすいません）

♥ 0

いいねをした人: 居ません

[tomohanano]

オレインさん

失礼いたしました。

仮環境で実験中でして、URLはこちらです。

テストサイト

From here to everywhere.

sample.meganelog.site

Snow Monkeyはバージョン: 12.2.2です。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

一応これでできるかなとは思います。

.smb-panels__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.smb-panels__item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.smb-panels__item__action {
    margin-top: auto;
}

が、状況によってなにか影響がでないかや、今後のアップデートでの互換性的にメンテナンスの必要性もありそうなので、やるなら親に class 追加して詳細度を高めた CSS を書くとか、ちょっと工夫したほうが良いかもしれません。

♥ 1

いいねをした人: 居ません

[tomohanano]

キタジマさま

返信が遅くなり大変失礼いたしました。

まずはご提案いただいた方法で実装してみました。

ありがとうございました。

♥ 1

いいねをした人: 居ません

[投稿者]

投稿