javascript - div サイズ = 別の div へ

Question

私は2つの部門を持っています。1 つの div には画像が含まれ、もう 1 つの div には画像の上に配置されるテキスト キャプションが含まれます。

流体デザインでキャプション div の幅を画像 div と同じにするにはどうすればよいですか?

ページは流動的なレイアウトを使用して設計されているため、ブラウザのサイズが変更されると画像のサイズが変更されます。

<div id="captions">Captions</div>
<div id="image"></div>

CSSでこれを行う方法はありますか？

Answer 1

次のように状況を逆にすることができます。

HTML

<div id="captions">    
    Captions..
    <div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>

CSS

#captions{
    background: #000;
    color:#fff;
   /* width:100%;*/
   display:inline-block;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
#image{
    width: 100%;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
#image img{
    vertical-align: bottom;
}

これはデモです

Answer 2

両方の要素をあなたに入れdiv、次に設定することができますwidth

<div id="yourdiv">
  <img id="yourimg" src="" />
  <p class="yourtext">Here some Text</p>
</div>

次に、幅を設定します.yourtext

.yourtext {
            width: 100%;
          }

フィドル