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

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>​

我需要

div.cont

的宽度作为其包含的

div.size

的宽度（在我的实际示例中，

div.size

是一个图像，其宽度在每个实例中都会有所不同）

这不会发生，因为

div.text

比其容器占用更多的空间，如何停止此操作并使文本换行

---

删除了所有以前的内容，因为我（在做了一些挖掘之后）发现了一个与工作解决方案完全相同的副本

我的回答也不正确（因为op随后指定图像必须允许可变）

答案是，而且是一个精确的副本

//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>

---

基本上，它使用display:table-*（仔细阅读）

删除了所有以前的内容，因为我（在做了一些挖掘之后）找到了一个与工作解决方案完全相同的副本

我的回答也不正确（因为op随后指定图像必须允许可变）

答案是，而且是一个精确的副本

//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>

基本上，它使用display:table-*（具有良好的读取能力）

'.size{float:left；}'

如果有帮助，请告诉我。

'.size{float:left；}'

---

如果有帮助，请告诉我。

进一步介绍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*/

  ...
}

只需给内容一个加分，使其与图像一样宽（加上填充）

希望有帮助

---

Fiddle:

扩展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*/

  ...
}

只需给内容一个加分，使其与图像一样宽（加上填充）

希望有帮助

---

Fiddle:

如果没有javascript，我无法设置div.cont或任何其他包含div的文件的宽度。Im使用CMS，因此div.size（或图像）的宽度会有所不同，但标记的其余部分需要保持不变。然后在内容周围环绕一个div（即制作另一个容器，您可以在其上设置样式）。如果我在内容周围放置另一个div并设置其宽度，那么图像（由CMS动态提供）时会发生什么情况是否已更改为具有不同宽度的？很抱歉，过于挑剔，但我需要图像尺寸不变。我不想更改它们的宽度。没问题-只要不添加.innercont img css，div就会展开（因此下面的文本也会展开），以适应图像的宽度+边距/填充。顺便说一句，不以任何方式限制图像几乎肯定会给你带来很多其他的麻烦，例如，有人发布2048宽的图像。。。你的站点现在有水平滚动条：如果没有javascript，sI无法设置div.cont或任何其他包含div的文件的宽度。Im使用CMS，因此div.size（或图像）的宽度会有所不同，但标记的其余部分需要保持不变。然后在内容周围环绕一个div（即制作另一个容器，您可以在其上设置样式）。如果我在内容周围放置另一个div并设置其宽度，那么图像（由CMS动态提供）时会发生什么情况是否已更改为具有不同宽度的？很抱歉，过于挑剔，但我需要图像尺寸不变。我不想更改它们的宽度。没问题-只要不添加.innercont img css，div就会展开（因此下面的文本也会展开），以适应图像的宽度+边距/填充。顺便说一句，不以任何方式限制图像几乎肯定会给你带来很多其他的麻烦，例如，有人发布2048宽的图像。。。你的站点现在有水平滚动条：唯一的缺点是当文本从文档流中删除时，你可能会遇到重叠问题。有没有一种没有绝对定位的解决方案？唯一的缺点是，当文本从文档流中删除时，您可能会遇到重叠问题。有没有一个没有绝对定位的解决方案？也许你可以发布一个你需要的例子。也许你可以发布一个你需要的例子。