使div只与兄弟一样宽

我在父div中有图像。我也希望在该父div的图像下面有一些文字，但我只希望该文字div的宽度与图像一样大。使div只与兄弟一样宽

<div class="parent"> 
    <div class="child"> 
     <div class="image-container"> 
      <img src="..." /> 
     </div> 
     <div class="text"> 
     ... 
     </div> 
    </div> 
</div>

这是说明我的问题的jsfiddle： jsfiddle

我怎样才能解决这个问题？我无法将文本放在与图像相同的div中，因为图像是使用最大高度CSS切断的。

来源

2014-05-20 Kamran224

是不是有一个原因，你只是想显示图像的顶部？ –

@MattWay我正计划在稍后实施保证金抵消。无论如何，我只想显示图像的一部分，以免混乱我的应用程序。 – Kamran224

真的不明白你想做什么。是这样的吗？ http://jsfiddle.net/8hV2E/4/ – reuelab

我简化了你的标记和CSS一点点。你可以让他们在同一个家长。对文本使用绝对位置，并相对于其父文件添加位置。这样它会采取父母的宽度。父母的宽度将根据图像的大小来设置，因此文本的宽度与一天结束时的图像宽度相同。

HTML：

<div class="parent"> 
    <div class="image-container"> 
     <img src="http://lorempixel.com/400/600/" /> 
     <div class="text"> 
      text 
     </div> 
    </div> 
</div>

CSS：

.parent { 
    width: 700px; 
} 
.image-container { 
    background: green; 
    float:left; 
    position: relative; 
} 

div.text { 
    background: green; 
    position: absolute; 
    width:100%; 
    left:0; 
}

jsfiddle

来源

2014-05-20 01:16:41 Sammy

我认为他们想要图像下面的文字，但保持与图像相同的宽度。 –

他们有显示：图像容器的内联块，所以我认为他希望它并排。 – Sammy

没错。问题需要更具体我想。 –

这是你所追求的？你可以使用jQuery吗？

$('.child').width($('.image-container').width());

http://jsfiddle.net/YRYZA/

来源

2014-05-20 01:22:40 garethb

这样做：

.child{ position: relative; } 
.text{ position: absolute; left: 0px; right: 0px; }

然后.child DIV将是一样宽的图像（未由的.text宽度的影响）和的.text将适合于的空间。

JSFiddle：jsfiddle.net/8hV2E/12

来源

2014-05-21 01:07:19

使div只与兄弟一样宽

回答

相关问题