html - ボーダーボトムにタイトルを配置

Question

レスポンシブなポラロイドのようなフォト フレームを作成しようとしています。問題は、タイトルが下の境界線にくっつかず、画像の上に浮かんでいることです。

パーセントの代わりにピクセルを使用している場合は機能しますが、そうでない場合はそうではありません。何か案は ？

フィドル

HTML

<div class="imageContainer">
  <img src="http://photogallery.indiatimes.com/beauty-pageants/miss-india/rochelle-maria-raos-photo-shoot/photo/16651703/Miss-India-International-Rochelle-Maria-Rao-during-her-photo-shoot-.jpg" />
    <p> Title</p>
</div>

CSS

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
    margin-right:10px;
    border:10px solid #e3e3e3;
    border-bottom:30px solid #e3e3e3;
}

.imageContainer img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}
.imageContainer p{
    position:absolute;

}

Answer 1

あなたがしていることは間違っています。画像の周りに太い境界線を使用しているため、内部のテキストがその上に流れないようになっています。これを達成するには、負bottomの値を使用する必要がありますtitle

.imageContainer p{
    position:absolute;
    bottom: -40px;
}

デモ

このアプローチの代わりに、display: inline-block; liネストされたdiv&imgタグ、div固定の高さ、固定されimgたmin height、widthタイトル要素が配置absoluteされた要素を使用することをお勧めしますbottom 0

Answer 2

.imageContainer pこれを宣言に追加します。

bottom: -40px;