こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

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

お疲れ様です。
横並びのアルバムについて質問です。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>

投稿日時 - 2017-10-13 12:32:05

QNo.9385385

困ってます

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

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

そこで一応、作ってみました。
https://thimbleprojects.org/yoyama1208/333831

投稿日時 - 2017-10-15 22:05:53

お礼

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

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

※ところでこのthimbleというの良いですね。

投稿日時 - 2017-10-16 10:28:01

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

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

CSSも掲示して下さい。

投稿日時 - 2017-10-15 19:11:54

お礼

ありがとうございます。
画面のCSSは1行でできるので載せていませんでした。
おそらく構造上CSSだけで実現できないのがわかりました。

投稿日時 - 2017-10-16 10:32:20

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-