Html 将文本限制为同级图像的宽度/CSS 中的自动宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/617386/
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
Limit text to the width of sibling image / auto width in CSS
提问by DisgruntledGoat
I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.
我基本上是在尝试创建一个版本的“figure”元素（即将在 HTML5 中推出），其中我有一个图像，下面有一个简短的描述。
However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).
但是，我想将整个元素的宽度限制为图像的宽度，因此文本不会比图像宽（必要时换行到多行）。
Basic HTML:
基本 HTML：
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px"to the divto match the image width.
我精通使用CSS，但我想不出任何纯CSS解决方案，而无需添加style="width:100px"到div相匹配的图像宽度。
Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).
更新：经过一番搜索和思考，最好的方法似乎是在 div 上使用内联宽度。我将保留图像上的宽度属性，以防我希望 div 比图像宽一点（例如容纳更长的标题）。
This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.
这种方法也意味着我可以并排放置两个图像，下面有一个标题。如果我有一组相同大小的图像，我当然可以为每个div.
Thanks to everyone who answered!
感谢所有回答的人！
采纳答案by Antony Scott
Stylesheet
样式表
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
note: to enable wrapping just remove that last css line
注意：要启用包装只需删除最后的 css 行
HTML
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.
我已经在 Chrome、Firefox 和 IE7 中检查过它，并且在这三个中看起来都不错。我意识到这在 div 上有宽度而不是在 img 上，但至少你只需要在一个地方设置宽度。缺少使用 css 表达式（仅限 IE），我看不到将外部 div 宽度设置为第一个子元素宽度的方法。
回答by Hedley Smith
This could also be accomplished using 'display: table-caption'for the caption, as follows:
这也可以使用'display: table-caption'标题来完成，如下所示：
HTML
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
Stylesheet
样式表
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1
此块也可以浮动在其他文本的左侧。我已经在 IE8+ 中测试过了。这是一个 JSBin 示例：http: //jsbin.com/xiyevovelixu/1
回答by Angel
For setting the width to match the image automatically you could use
要设置宽度以自动匹配图像，您可以使用
.figure {
display: table;
width: 1px;
}
This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.
这使得 div 表现得像一个表格（在 Internet Explorer 中不受支持）。或者您可以使用表格而不是 div。我认为没有另一种自动设置宽度的方法。
Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.
编辑：最简单的方法是忘记自动宽度并手动设置。如果确实需要，您可以使用 JavaScript 或表格。在这种情况下，表格的使用并不是那么难看，因为您正在解决 HTML 版本的限制。在服务器端脚本的情况下，您还可以在生成页面时设置宽度。
回答by user73912
回答by doekman
You could use the display:tablesolution for all other browsers, and a CSS Behaviourfor Internet Explorer.
您可以使用display:table适用于所有其他浏览器的解决方案，以及适用于 Internet Explorer的CSS 行为。
