Html 如何将 DIV 宽度调整为内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6213237/
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 can I adjust DIV width to contents
提问by Captain Comic
I have a div element with style attached:
我有一个带有样式的 div 元素：
.mypost {
border: 1px solid Peru;
font-family: arial;
margin: auto;
min-width: 700px;
width: 700px;
}
I am diplaying WordPress post contents inside the DIV block but for simplicity let assume that there is only one <img>inside the DIV. I want my div to be minimum 700 px wide and adjust the width if image is wider than 700 px.
我正在 DIV 块中显示 WordPress 帖子内容，但为简单起见，假设<img>DIV 中只有一个。我希望我的 div 最小宽度为 700 像素，如果图像宽度大于 700 像素，则调整宽度。
What are my options to achieve that? Please advice.
我有哪些选择来实现这一目标？请指教。
UPDATE
更新
See my Fiddle http://jsfiddle.net/cpt_comic/4qjXv/
回答by kapa
One way you can achieve this is setting display: inline-block;on the div. It is by default a blockelement, which will always fill the width it can fill (unless specifying widthof course).
实现此目的的一种方法是display: inline-block;在div. 默认情况下block，它是一个元素，它将始终填充它可以填充的宽度（除非width当然指定）。
inline-block's only downside is that IE only supports it correctly from version 8. IE 6-7 only allows setting it on naturally inlineelements, but there are hacks to solve this problem.
inline-block唯一的缺点是 IE 仅从版本 8 开始正确支持它。IE 6-7 只允许在自然inline元素上设置它，但是有一些技巧可以解决这个问题。
There are other options you have, you can either floatit, or set position: absoluteon it, but these also have other effects on layout, you need to decide which one fits your situation better.
您还有其他选项，您可以选择float它，也可以设置position: absolute它，但是这些对布局也有其他影响，您需要决定哪个更适合您的情况。
回答by Vandervals
I'd like to add to the other answers this pretty new solution:
我想将这个非常新的解决方案添加到其他答案中：
If you don't want the element to become inline-block, you can do this:
如果您不希望元素成为内联块，您可以这样做：
.parent{
width: min-content;
}
The support is increasing fast, so when edge decides to implement it, it will be really great: http://caniuse.com/#search=intrinsic
支持正在快速增加，所以当边缘决定实施它时，它会非常棒：http: //caniuse.com/#search=intrinsic
回答by Spudley
You could try using float:left;or display:inline-block;.
您可以尝试使用float:left;或display:inline-block;。
Both of these will change the element's behaviour from defaulting to 100% width to defaulting to the natural width of its contents.
这两者都会将元素的行为从默认为 100% 宽度更改为默认为其内容的自然宽度。
However, note that they'll also both have an impact on the layout of the surrounding elements as well. I would suggest that inline-blockwill have less of an impact though, so probably best to try that first.
但是，请注意，它们也会对周围元素的布局产生影响。不过，我建议这inline-block会产生较小的影响，因此最好先尝试一下。
回答by Piotr Kula
EDIT2- Yea auto fills the DOM SOZ!
EDIT2- 是的，自动填充 DOM SOZ！
#img_box{
width:90%;
height:90%;
min-width: 400px;
min-height: 400px;
}
check out this fiddle
看看这个小提琴
http://jsfiddle.net/ppumkin/4qjXv/2/
http://jsfiddle.net/ppumkin/4qjXv/2/
http://jsfiddle.net/ppumkin/4qjXv/3/
http://jsfiddle.net/ppumkin/4qjXv/3/
and this page
和这个页面
http://www.webmasterworld.com/css/3828593.htm
http://www.webmasterworld.com/css/3828593.htm
Removed original answer because it was wrong.
删除原始答案，因为它是错误的。
The width is ok- but the height resets to 0
宽度没问题-但高度重置为 0
so
所以
min-height: 400px;
