2

我有两个div。一个 div 包含一个图像，另一个将包含将覆盖图像的文本标题。

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

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

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

有没有办法在 CSS 中做到这一点？

4

2 回答 2

0

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

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

然后设置宽度.yourtext

.yourtext {
            width: 100%;
          }

小提琴

于 2013-06-19T20:18:06.650 回答
0

我们可以将情况反转如下：

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

这是一个演示

于 2013-06-19T20:45:26.140 回答