-PR-
解決済み

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

  • 困ってます
  • 質問No.9385385
  • 閲覧数88
  • ありがとう数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
レベル4

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

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
レベル4

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

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

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

お礼率 100% (2/2)

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


このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

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

特集


抽選で合計100名様にプレゼント!

ピックアップ

ページ先頭へ