-PR-
解決済み

横並びのカラム内で画像の高さを基準にして合わせたい

  • 困ってます
  • 質問No.9385385
  • 閲覧数100
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 100% (2/2)

お疲れ様です。
横並びのアルバムについて質問です。columnボックスに見出し<h4>と画像、説明文の<p>が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。
これを画像の頭部分で高さを揃えることはcssだけで実現できるでしょうか。

見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。
お知恵を貸していただければと思います。
※画像の大きさは一定です。

<div class="column4">
<div class="column">
<h4>■ダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div>
</div>
<div class="column">
<h4>■ダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div>
</div>
<div class="column">
<h4>■ダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div>
</div>
<div class="column">
<h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキスト</p></div>
</div>
</div>
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.2
レベル5

ベストアンサー率 100% (2/2)

display: inline-block;にすると、下を基準に横並びしてしまうため、画像を水平できません。
上を基準に横並びするには、display: flex;にすれば、良いですが、見出しに2行以上あると“杭は打たれる”みたいに1つだけ下にズレるので、htmlに見出しと画像とテキストの3つのブロックにする必要があります。

そこで一応、作ってみました。
https://thimbleprojects.org/yoyama1208/333831
お礼コメント
usagiexpress

お礼率 100% (2/2)

乱雑な質問内容をご理解・回答いただきありがとうございます。

例に出して頂いたように、テーブルレイアウトにすれば実現できるのですが、レスポンシブル対応でスマホ画面だとcolumnブロックごとに縦並びにしたかったので(文章不足してました)、このhtml構成にしています。
いろいろやりましたが、諦めてjsで制御することにしました。ソースまで作っていただきありがとうございます。そして見出しを画像の下にしてもらえないかデザイナーに交渉してみます。

※ところでこのthimbleというの良いですね。
投稿日時 - 2017-10-16 10:28:01

その他の回答 (全1件)

  • 回答No.1
レベル5

ベストアンサー率 100% (2/2)

htmlだけじゃ、分からないよ。
CSSはどのような内容になっていますか?

CSSも掲示して下さい。
お礼コメント
usagiexpress

お礼率 100% (2/2)

ありがとうございます。
画面のCSSは1行でできるので載せていませんでした。
おそらく構造上CSSだけで実現できないのがわかりました。
投稿日時 - 2017-10-16 10:32:20


このQ&Aで解決しましたか?
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
-PR-

特集


開業・独立という夢を持つ人へ向けた情報満載!

ピックアップ

ページ先頭へ