子カラムの中身の位置を右下に

猫の姿は千差万別

猫は自由な姿を持つ。
液体じゃないかとうわさされることもある。
とにかく気持ちよさそうにしているのが
何よりだ。

もっと読む

作り方

  1. カラムブロックを2カラムで挿入、配置は幅広に
  2. 左側の子カラムには画像など（今回はギャラリーを2カラムでいれてあります）
  3. 右側の子カラムにテキストコンテンツを入れ、それらをまるっとグループ化します。
  4. 右側の子カラムの詳細設定＞高度な設定から追加CSSクラスに hp_flexAlignRightBottom を追加

カラムブロックは垂直方向の位置を「設定しない」状態の時、子カラムたちは高さが揃います。子カラムの水平位置を調整するオプションはないので、CSSを追加して右側に寄せています。

この記事に追加しているCSS

@media (min-width: 600px) {
	.hp_flexAlignRightBottom {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}
	.hp_flexAlignRightBottom > * {
		max-width: 80%;
	}
}