Question

HTML

<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

CSS

.size {
    background-color: red;
    height: 100px;
    width: 100px;
}
#size2 {
    width: 200px;
}
.cont {
    padding: 10px;
    float: left;
}

我需要div.cont的宽度为其包含的div.size的宽度（在我的实际示例中div.size是一个图像，并且它的每个实例都会有所不同）。

这不会发生，因为div.text比它的容器占用更多的空间，我怎么能阻止它并使文本换行？

JS Fiddle

Answer 1

我已经删除了所有以前的东西（经过一些挖掘后），找到了与工作解决方案完全相同的内容。

我的回答也是不正确的（因为操作然后指定图像必须允许变量）

答案是found on this jsfiddle，与css - shrink a parent div to fit one child's width and constrain the width of the other child

完全相同

// HTML

<div id="container">
    <div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
    <div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>

// CSS

#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}

基本上它使用display：table- *（读得很好）

Answer 2

'。size {float：left;}'

请告诉我这是否有帮助。

Answer 3

扩展Paul Sullivan的方法，

在你的css中：

.size {
  ...

    display:block; /*assuming its an image - making sure its block level*/

  ...
}

.cont {
  ...

    position:relative; /*add this to parent container if comming from cms*/

  ...
}

.text {
  ...

    position:absolute;
    top:100%; /*just to make sure content doesnt overlaps image*/

  ...
}

只是给予一个加分点，让内容拉伸到图像宽度（加上填充）

希望它有所帮助，

小提琴：http://jsfiddle.net/BKRsT/3/

使文本div只能与其容器一样宽

3 个答案: