Question

我有两个div。一个div包含一个图像，另一个div将包含一个将叠加在图像上的文本标题。

如何使标题div宽度等于流体设计中的图像div？

页面采用流畅的布局设计，因此图像的大小可以随浏览器大小的变化而变化。

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

有没有办法在CSS中执行此操作？

Answer 1

您可以将这两个元素放入div，然后设置width

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

然后设置.yourtext

的宽度

.yourtext {
            width: 100%;
          }

FIDDLE

Answer 2

我们可能会将情况反转如下：

<强> 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;
}

This is a DEMO

Div size =到另一个div

2 个答案: