CSS - div 宽度取决于上面的图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5485341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - div width depending on image size above
提问by donpedroper
<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>As you can see now, the box with the black border has an automatic width that adjust to the content inside. The problem is that I want the size of the box to adjust to the width of the image inside. So if the image has a width like on the example (the red box), the text beneath should stop at the blue-dotted mark and go down to a new line..
正如您现在所看到的，带有黑色边框的框有一个自动宽度，可以根据里面的内容进行调整。问题是我希望框的大小调整到内部图像的宽度。因此，如果图像的宽度类似于示例（红色框），则下方的文本应停在蓝点标记处并向下换行。
But how do I do that?
但是我该怎么做呢？
回答by HymanJoe
the problem with your request is that if the div doesn't have a specific width the text doesn't "know" when to wrap and that's why it uses the width of the outter div...
您的请求的问题在于，如果 div 没有特定宽度，则文本“不知道”何时换行，这就是为什么它使用外部 div 的宽度...
So... You need to add a width to the outter div or in case of using a div that surrounds the image + text, a width in that div.
所以...您需要向外部 div 添加一个宽度，或者在使用围绕图像 + 文本的 div 的情况下，在该 div 中添加一个宽度。
EDIT:
编辑：
here you go: http://jsfiddle.net/jnmtu/
给你：http: //jsfiddle.net/jnmtu/
I made a test (on my example is the third one) with a table to test it first and to refresh my mind of how it works with tables, and then I applied it to the CSS way.
我做了一个测试（在我的例子中是第三个），首先用一个表来测试它并让我重新思考它是如何处理表的，然后我将它应用到 CSS 方式。
How it works:
这个怎么运作：
You need to have a surrounding div that has a minimal width (1%), and make it display as a table; then the inner div (corresponding to the "cell") should have an auto height and hidden overflow, this is needed to "force" it to strech the div's width + height (it's a common trick).
您需要有一个最小宽度 (1%) 的周围 div，并使其显示为表格；那么内部 div（对应于“单元格”）应该有一个自动高度和隐藏的溢出，这是“强制”它拉伸 div 的宽度 + 高度所必需的（这是一个常见的技巧）。
NOTE: I haven't tested in Internet Explorer, it does work with Firefox and Safari.
注意：我还没有在 Internet Explorer 中测试过，它可以与 Firefox 和 Safari 一起使用。
回答by Holger Jakobs
What would be needed is a width attribute like availabe in Android layouts, which is named width: wrap-content. Maybe this would be a good proposal for CSS, as it has proven handy in designing screens.
所需要的是一个类似于 Android 布局中可用的 width 属性，它被命名为 width: wrap-content。也许这对 CSS 来说是一个很好的提议，因为它已被证明在设计屏幕方面很方便。
回答by Marc Audet
@HymanJoe said it well, you need to set a width to the wrapping div to match the width of the inner image.
@HymanJoe 说得好，您需要为包装 div 设置一个宽度以匹配内部图像的宽度。
Here is one way of doing it: http://jsfiddle.net/audetwebdesign/bpN8x/
这是一种方法：http: //jsfiddle.net/audetwebdesign/bpN8x/
Basically, I use jQuery to determine the width of the image and then set the width of the wrapper div.
基本上，我使用 jQuery 来确定图像的宽度，然后设置包装器 div 的宽度。
Alternatively, if you were feeding the image from a CMS, you could determine the width of the image dynamically and then set the width on the wrapper div using an inline style.
或者，如果您从 CMS 提供图像，您可以动态确定图像的宽度，然后使用内联样式在包装 div 上设置宽度。
I don't think a CSS-only is possible because of the way the box-model determines widths as content is laid out. Widths are inherited from the parent element, and are not passed up from the children elements.
我认为仅使用 CSS 是不可能的，因为框模型在内容布局时确定宽度的方式。宽度从父元素继承，而不是从子元素向上传递。
回答by clairesuzy
a Google search throws up the fact that this question has been asked a million times and that there is still no satisfactory way without attaching a width to the container
谷歌搜索发现这个问题已经被问了一百万次，如果不给容器附加宽度，仍然没有令人满意的方法
However...
然而...
This I think is a job best handled by the table element- the table element has a captionelement which I would say is the tool for the job?
我认为这是最好由表格元素处理的工作- 表格元素有一个caption元素，我会说它是工作的工具？
All browsers except IE6/7 handle the following bit of code well - IE6/7 handle it as far as the width goes, but it does not support the CSS caption-sideproperty so it will not put the caption underneath the image - which may or may not be a problem - IMHO it will still look pretty (in those frames ;)) but YMMV, maybe an alternative if you really really don't want to script a width in
除了 IE6/7 之外的所有浏览器都可以很好地处理以下代码 - IE6/7 处理它就宽度而言，但它不支持 CSScaption-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:
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;
}
回答by James Cat
fwiw the smallest jquery I came up with is this
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>
quick.
快的。
回答by Kay
If I understood you correctly,
如果我理解正确的话，
If the image is the same size as the div (Black border) then the text will automatically do what you want. Or try overflow: none;on the div.
如果图像与 div（黑色边框）大小相同，则文本将自动执行您想要的操作。或者试试overflow: none;div。
But, personally I wouldnt do it like that. Divs are flexible and scalable So I would say use 2 or 3 divs within each other.
但是，我个人不会那样做。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>
just give the image a fixed size and enter the comment. you can also set
只需给图像一个固定大小并输入注释。你也可以设置
#the-image-itself, #the-comment{
display: block;
}
If you like
如果你喜欢
hope this helps :)
希望这可以帮助 ：）
