Question

<html><head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

    .box {background:gray;border:3px solid black;float:left;}

    </style>
</head>

<body>
   
<div class="box">
    <img src="http://i.stack.imgur.com/shWOu.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p>
</div>
</body></html>

正如您现在所看到的，带有黑色边框的框具有自动宽度，可根据内部内容进行调整。问题是我希望盒子的大小调整到里面图像的宽度。因此，如果图像的宽度类似于示例（红色框），则下方的文本应停在蓝点标记处并向下移动到新行。

但我该怎么做？

Answer 1

你的请求的问题是，如果div没有特定的宽度，文本不会“知道”何时换行，这就是为什么它使用outter div的宽度......

所以......你需要在outter div中添加一个宽度，或者在使用围绕图像+文本的div时，需要为该div添加一个宽度。

编辑：

你去的地方： http://jsfiddle.net/jnmtu/

我做了一个测试（在我的例子中是第三个），用一个表来测试它，并刷新我对它如何与表一起工作的想法，然后我将它应用到CSS方式。

工作原理：

你需要一个具有最小宽度（1％）的周围div，并使其显示为一个表格;然后内部div（对应于“单元格”）应该有一个自动高度和隐藏溢出，这需要“强制”它拉伸div的宽度+高度（这是一个常见的技巧）。

注意：我没有在Internet Explorer中测试过，它可以与Firefox和Safari一起使用。

Answer 2

需要的是像Android布局中的可用宽度属性，其名称为width：wrap-content。也许这对CSS来说是一个很好的建议，因为它已经证明在设计屏幕方面很方便。

Answer 3

@JackJoe说得好，你需要设置包装div的宽度以匹配内部图像的宽度。

以下是一种方法：http://jsfiddle.net/audetwebdesign/bpN8x/

基本上，我使用jQuery来确定图像的宽度，然后设置包装div的宽度。

或者，如果您从CMS提供图像，则可以动态确定图像的宽度，然后使用内联样式在包装div上设置宽度。

我不认为只有CSS是可能的，因为盒子模型在布置内容时确定宽度的方式。宽度从父元素继承，不从子元素传递。

Answer 4

谷歌搜索引发了这样一个事实：这个问题已被问过一百万次，并且如果没有给容器增加宽度，仍然没有令人满意的方法

...然而

我认为这是表元素最好处理的工作 - 表元素有一个caption元素，我想说这是工作的工具吗？

除了IE6 / 7之外的所有浏览器都能很好地处理以下代码 - IE6 / 7处理它的宽度，但它不支持CSS caption-side属性，所以它不会将标题放在下面图像 - 这可能是也可能不是问题 - 恕我直言它仍然看起来很漂亮（在那些帧;））但是YMMV，如果你真的真的不想编写宽度，可能是另一种选择

<div class="content">
<table summary="image with caption">
<caption>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</caption>
<tr>
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td>
</tr> 
</table>
</div>

CSS：

.content {
  float: left;
  padding: 20px;
  border: 2px solid #000;
}

.content table {
  border: 0;
  border-collapse: collpase;
}

.content td {
  padding: 0;
}

.content caption { 
  caption-side: bottom; 
}

Answer 5

fwiw我想出的最小的jquery就是这个

<div class="caption_wrap" style="float:right">
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br />
this is some caption text, this is some caption text, this is some caption text, this is some     
caption text</div>

快。

Answer 6

如果我理解正确的话，

如果图像与div（黑色边框）的大小相同，则文本将自动执行您想要的操作。或者在div上尝试overflow: none;。

但是，我个人不会这样做。 Div是灵活和可扩展的所以我想说在彼此之间使用2或3个div。

e.g。

<div id="black-border">

<div id="for-image">

<div id="the-image-itself">
<img src="image.jpg"/>
</div>

<div id="the-comment">
<p> This image is awesome</p>
</div>

</div>

</div>

只需为图片指定固定尺寸并输入评论即可。你也可以设置

#the-image-itself, #the-comment{
display: block;
}

如果你喜欢

希望这有助于：）

CSS - div宽度取决于上面的图像大小

6 个答案: