可変の画像縦幅の下部に合わせて文章を表示したい

Question

###質問
floatの2カラムで、片方に画像を横幅に合わせて縦幅が設定されるように、もう片方に画像の詳細情報が表示されるようにしていて、その情報を画像の可変の縦幅の下部に揃えたいのですが、どのようにすればいいでしょうか。CSSだけでposition:relative/absolute、overflow:hidden、vertical-align:bottomなどを使用すればできそうな気がするのですが、JavaScriptなどで揃える必要があるでしょうか？

<div>
  <div class="leftcol">
    <img src="sample.jpg" style="max-width:100%; height:auto">
  </div>
  <div class="rightcol">
    <p>サンプル1</p>
    <p>サンプル2</p>
    <p>サンプル3</p>
  </div>
</div>

実際はBootstrapのグリッドシステムでカラムや幅を設定しています。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS）を提示されたほうが回答を得やすいと思います。

Answer 1

わたくしであれば、文書構造的に、以下のように

<dl>
  <dt>.leftcolの内容</dt>
  <dd>.rightcolの内容</dd>
</dl>

dl {
  display:table;
}
dt,dd {
  display:table-cell;
}
dt {
  /*.leftcolの内容を移植*/
}
dd {
  /*.rightcolの内容を移植*/
  vertical-align:bottom;
}

しちゃうと思います。

追記：当方でのテスト状況

<div id="box">
  <dl>
    <dt><img src="images/img01.png"></dt>
    <dd><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p><p>ほげほげほげほ</p></dd>
  </dl>
</div>

#box {
  width:500px;
  text-align:left;
}
#box dl {
  display:table;
  width:100%;
}
#box dl dt,#box dl dd {
  display:table-cell;
  width:50%;
}
#box dl dt {
  background-color:#CFF;
  vertical-align:bottom;
  text-align:center;
}
#box dl dt img {
  max-width:100%;
  height:auto;
}
#box dl dd {
  background-color:#FFC;
  vertical-align:bottom;
}
#box dl dd p {
  line-height:22px;
  font-size:16px;
}
#box dl dd p:last-of-type {
  margin-bottom:-3px;
}

画像は、137px/256pxで確認、どっちもbottom設定。

Comments

[sssooo]

レスポンシブで縦長構成対応したいのと、実際はもっとコンテンツが入ること、他ページとの共通デザインを部分的に適用しているので作業効率的にdiv構成で実装したいのです...何か簡単な方法はないでしょうか？

[LibertyBell3]

う～ん。
タブレット/スマホでは、display:block;にすれば良いだけなので、
ちゃんと対応できるのですが…

[sssooo]

上の通りに設定するとすると、widthがmax-width:100%のままだと画像が表示されませんね...

[LibertyBell3]

いえ、table-cellにしたdt/ddは完全に同じ高さになります。
(背景色を付けて確認ください)
揃わないの意味が複数考えられるので、それぞれの対応を以下に。
・画像の高さよりテキスト部分の方が長く、その場合でも下辺を揃える場合
dtにもvertical-align:bottom;を
・画像の下辺ぴったりにしたいが、数pxずれている場合
改行高が原因なので、その分をマイナスする。
例：font-size:16px;line-height:22px;
(line-heightマイナスfont-size)÷2の分だけ引くので、
dd p:last-of-type {
margin-bottom:-3px;
}
でどうでしょう？

[sssooo]

同じ高さになる件は了解しました。しかし、max-width:100%;height:autoの場合、画像が高さを持たなくなり表示されず、よって背景色も表示されません。

[LibertyBell3]

もしかして、float入れてませんか？(float入れると高さが0になるので)
ちゃんと表示されるテストソースを追記しておきましたので、
参考にしてくださいませ。

[sssooo]

そうですね、Bootstrapのグリッドシステムはfloatを使用するので入ってますね。しかしどこの親要素にclearfix入れても画像表示されないので違う原因なんじゃないかと思うのですが...どんな問題が考えられるでしょうか？もしくはグリッドシステムのfloatが問題の場合どのように対処すべきでしょうか？

[LibertyBell3]

clearfixではなくて、dt/ddにfloat:none;ですね。
不安であれば、dlにも。

[sssooo]

でしたら、それを入れても変わらないので、別の原因だと思います。

[LibertyBell3]

原因の切り分けが出来ないと、これ系は扱えないと思います。
とりあえず、インラインでスタイルを記述して適用されれば、
例：<dt style="float:none;">など
対処は間違っていないので、あとは、インラインで書かなくても、
適用されるように、作り替えるだけです。
#boxのように、IDで独自の記述を行い、その記述が最後に読み込まれるような位置にあれば、通常問題ないはずなので、CSSファイルの最後や、
別ファイルに記述して、外部CSSの最後に読み込むファイルとして指定すれば、良いのではないでしょうか？

[sssooo]

そうですね。おそらくグリッドシステムとの兼ね合いなんじゃないかと思います。
なので僕は結局row-eq-heightクラスとflexboxを使うことでdiv構造のままスマートに対応できたのでこちらの方法を採用しますが、追記の方法でも可能なのでBAとさせていただきます。