0

流動的なレイアウトをデザインするのは初めてで、私がやろうとしていることの 1 つは、写真の下部にキャプションを重ねることです。私が使用している方法は、写真 (幅: 100%) を div (幅: 50%) 内に配置し、写真の下にキャプションを含む div を追加することです。オーバーレイするために、キャプションの高さを静的な 30 ピクセルにし、位置を相対的に上 -50 ピクセル (+パディング) に設定しました。

CSS: 

#contentdiv {
    width:50%;
}
#gallerydescription {
    height:30px;
    padding:10px;
    background-image:url(../contentbkg.png);
    position:relative;
    top:-50px;
    margin-bottom:-50px;
}

HTML:

<div id="contentdiv">
   <img src="blog/1.gif" width="100%" />
   <div id="gallerydescription">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
   </div>
</div>

これは私が視覚的に望んでいることですが、実際には流動的なレイアウトではなく、キャプションが短すぎたり短すぎたりすると見苦しくなります。キャプションの長さでキャプション div の高さを決定し、「トップ」を高さとパディングのマイナスにする方法はありますか?

4

3 に答える 3

0

これを試して、どのように見えるかを確認してください。

#contentdiv {
    width:50%;
    position: relative
}
#gallerydescription {
    height:30px;
    padding:10px;
    background-image:url(../contentbkg.png);
    position:absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
}
于 2013-04-15T11:16:37.303 に答える
0

あなたが抱えて いるような問題に対する純粋なCSSソリューション

CSS

      #contentdiv{
        width: 50%;
        position: relative;
     }
     #gallerydescription{
        padding: 10px;
        background-image: url('../contentbkg.png');
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 60%;
        overflow: hidden;
     }

マークアップ (変更なし)

 <div id="contentdiv">
     <img src="blog/1.gif" width="100%" />
     <div id="gallerydescription">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
     </div>
  </div>

アップデート

jsfiddleこのフィドルを試してください

于 2013-04-15T11:17:06.460 に答える
-1

そのためにjQuery UI Positionを試すことができます。

次のように、2 つの要素を相対的に配置できます。

$("#elementToPosition").position({
  my: "left top",
  at: "right bottom",
  of: "#targetElement"
});

そして、overlaying の top プロパティを変更します:

$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);
于 2013-04-15T11:12:08.410 に答える