Html 如何使 div 具有与其内容相同的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3713790/
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
How do I make a div have the same width and height of its content?
提问by stevebot
Let's say I have an imgelement inside a div, how do I make the divhave the same width and height of its content using CSS?
假设我img在 a 中有一个元素div，如何div使用 CSS 使其内容的宽度和高度相同？
回答by meder omuraliev
Floating the div would make it shrinkwrap and so the div would only have room for the content inside.
浮动 div 会使它收缩包装，因此 div 只能为里面的内容留出空间。
You will probably need to use clearon the elements coming afterwards.
您可能需要clear在之后出现的元素上使用。
Another way would be to use inline-block.
另一种方法是使用inline-block.
回答by Sammy
inline-block is right.
内联块是对的。
<div style="border:1px solid red;display:inline-block">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" style="border:1px solid green" />
</div>
回答by Lee
By default, the div will have the same height -- unless you restrict it somehow, or add padding or margin. But the default width will fill the available space. If you want the width to collapse down to "shrink-wrap" the content, you'll either have to float it, or make it absolute positioned.
默认情况下，div 将具有相同的高度——除非您以某种方式限制它，或者添加填充或边距。但默认宽度将填充可用空间。如果您希望宽度向下折叠以“收缩包装”内容，则必须将其浮动或使其绝对定位。
The problem with this (depending on your needs) is that both of those effectively take it out of the normal layout. If you need it to still be part of the normal layout, you'll have to do something like this (the borders are included so you can tell what's going on):
这样做的问题（取决于您的需要）是两者都有效地将其从正常布局中移除。如果你需要它仍然是正常布局的一部分，你必须做这样的事情（包括边框，所以你可以知道发生了什么）：
<html>
<head>
<title>pdf test</title>
<style type="text/css">
#a {
position:relative;
border: 1px solid green;
}
#b {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div>Top</div>
<div id="a">
<div id="b">
asdf<br/>
typewriter</br>
fdsa
</div>
<div style="clear:both;"></div>
</div>
<div>
Bottom
</div>
</body>
</html>
The outer div #aworks like a normal div. The important part here is that #ais position: relative. That sets up a positioning context, within which #bwill float. This "double-wrapped" approach will let the div still work within the layout like a "normal" div, while allowing you to "sniff" the width/height from #bvia Javascript, if you need it.
外部 div 的#a工作方式类似于普通 div。这里的重要部分#a是position: relative。这会设置一个定位上下文，在该上下文#b中将浮动。这种“双重包装”方法将使 div 仍然像“普通”div 一样在布局内工作，同时允许您#b通过 Javascript从“嗅探”宽度/高度（如果需要）。
So... it depends on what your needs are -- but this should set you in the right direction.
所以......这取决于你的需求 - 但这应该让你朝着正确的方向前进。
good luck!
祝你好运！
回答by Jason
Inline-Block is not supported in IE for any default block level elements (like div, h1-h~ etc).
对于任何默认的块级元素（如 div、h1-h~ 等），IE 不支持内联块。
Inline block behaviour is to auto size the width and the height while allowing things like position, margins and padding. So all you really need to do is use
内联块行为是自动调整宽度和高度的大小，同时允许位置、边距和填充等内容。所以你真正需要做的就是使用
<span style="display: inline-block">
</span>
and then you will have some browser compatible code :)
然后你会有一些浏览器兼容的代码:)
Enjoy.
享受。
回答by Mohamed Nuur
try this css:
试试这个CSS：
div {
display: inline;
}
