1

私は次のhtmlを持っています:

<div class="container">
    <img src="..."/>
    <p>Heading</p>
</div>

私はこの動作が欲しい：

  • 画像がない場合 (<img> タグがない場合)、p は .container のサイズを指定する必要があります。
  • 画像はあるが、p の方が高い場合、.container は p と同じ高さにする必要があります。
  • 画像の高さがより高い場合、.container は画像と同じ高さである必要があり、p は .container の下部から、その中のテキストの量に応じて上に「成長」する必要があります (position:absolute; bottom:0 のように、位置内で) :相対ボックス)。
  • p には、要素を通して画像を部分的に見ることができるように、半透明の背景が必要です。透過性は問題ではありませんが、p が .container の全高を取得してからテキストの位置を変更するソリューションが必要ないため、これを含めます。
  • IE8 で動作する必要があります (必要なブラウザーのみ)。
  • 必要に応じて html 構造を自由に操作できますが、できるだけシンプルに保ちたいと考えています。

javascriptで簡単にできますが、純粋なCSSでできますか?

(このコードペンは、私がやろうとしていることを部分的に示しています: http://codepen.io/anon/pen/sqjnz )

明確にするために編集: .container を最も背の高い子 (img または p) と同じ高さにしたい。img と p の両方が存在する場合、テキストは画像の上にあり、.contianer の下部に固定されている必要があります。画像がない場合 (img タグが存在しない場合)、ボックスは通常の div のように動作し、p と同じサイズに展開する必要があります。

4

1 に答える 1

3

これはあなたが求めているものですか？

<div class="container">
    <img src="http://lorempixel.com/100/100"/>
    <p>Heading</p>
</div>​

およびCSS:

.container {
    /* these are just set so we can see the size of container */
    margin: 20px;
    padding: 5px;
    background-color: #eee;
}
.container img {
    margin-right: -100px;
    vertical-align: bottom;
}
.container p {
    display: inline-block;
    width: 100px;
    background-color: rgba(0,0,0,.75);
    line-height: 1em;
    color: #fff;
    vertical-align: bottom;
}​

また、IE と半透明性を組み合わせるには、 Lea Verou のブログ投稿を読むことをお勧めします。

于 2012-11-14T14:38:21.837 に答える