只允许某些内部div控制外部div的宽度 [英] Only let certain inner divs control outer div's width

问题描述

我有以下html结构：

I have the follow html structure:

<div id="container">
    <div id="block1">
        <img src="someimage/path" />
    </div>
    <div id="block2">
        Some Text
    </div>
    <div id="block3">
        Some Text
    </div>
</div>

容器为 float：left 。容器将伸展到最宽的div，但是如果我只想要它跟随block1，并且block2和block3的文本根据block1中的图像有多大来包装。对于我的标记，现在，如果文本是长的，它会推出容器div，只要文本出去，但我想让文本只有和图像一样宽，几乎像图像标题。任何想法？

the container is float:left. The container will stretch out to the widest div, but what if i only want it to follow block1, and have block2 and block3's text to wrap according to how big the image in block1 is. For my markup right now, if the text is long it will push out the container div as far as the text goes out, but I want the text to only be as wide as the image, almost like an image caption. Any ideas?

推荐答案

制作容器 display：inline-block; 与 overflow：auto; ，以便它自动伸展以适应内容。分别为Block＃2和Block＃3 overflow：auto; ，以便适合自己的内容。

Make the container display:inline-block; with overflow:auto; so that it automatically stretches to fit the content. Give Block #2 and Block #3 overflow:auto; too so that they stretch to fit their content.

不幸的是，您需要使用JavaScript来获取图像的宽度。看下面的例子，我用jQuery修复它。

Unfortunately, you need to use JavaScript to get the width to be the width of the image. See my example below, where I fix it with jQuery.

查看： http://jsfiddle.net/TFLMX/2

这篇关于只允许某些内部div控制外部div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！