0

次のコードを使用して、キャプションを画像の右下に揃えています。コードはうまく機能します。

ピクチャ コンテナ (.picture クラス)の最小幅を指定せずに書き直すことができるかどうか疑問に思っていました。幅がない場合、ブラウザー ウィンドウのサイズを変更すると、キャプションが下に移動します。

<div class="picture">
    <img src="image.jpg">
    <div class='captioning'>
        <div class='title'>text</div>
        <div class='caption'>text</div>
    </div>
</div>

.picture {
    position: relative;
    overflow: hidden;
    min-width: 1200px;
}
.picture img {
    float: left;
}
.picture .captioning {
    float: left;
    width: 150px;
    margin: 0 0 0 15px;
}
.picture .captioning .caption {
    position: absolute;
    bottom: 0;
}
.picture .captioning .title {
    position: absolute;
    bottom: 0;
}

何か案は？

前もって感謝します

4

1 に答える 1

0

解決策を見つけました。画像とキャプションの両方でdisplay: inline-blockを使用し、コンテナーでwhite-space: nowrapを使用しました。

.picture {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.picture img {
    display: inline-block;
}
.picture .captioning {
    display: inline-block;
    width: 150px;
    margin: 0 0 0 15px;
    white-space: normal;
}
.picture .captioning .caption {
    position: absolute;
    bottom: 0;
}
.picture .captioning .title {
    position: absolute;
    bottom: 0;
}
于 2014-03-02T07:43:46.033 に答える