如何将DIV宽度调整为内容

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的帖子内容但是为了简单起见，我们假设DIV中只有一个如何将DIV宽度调整为内容。我希望我的div最小宽度为700像素，如果图像宽度超过700像素，则调整宽度。

What are my options to achieve that? Please advice.

我有什么选择来实现这一目标？请指教。

UPDATE

UPDATE

See my Fiddle http://jsfiddle.net/cpt_comic/4qjXv/

看我的小提琴http://jsfiddle.net/cpt_comic/4qjXv/

4 个解决方案

#1

One way you can achieve this is setting display: inline-block; on the div. It is by default a block element, which will always fill the width it can fill (unless specifying width of course).

一种方法是设置display：inline-block;在div上。它默认是一个块元素，它总是填充它可以填充的宽度（除非指定当然的宽度）。

inline-block's only downside is that IE only supports it correctly from version 8. IE 6-7 only allows setting it on naturally inline elements, but there are hacks to solve this problem.

inline-block唯一的缺点是IE只能从版本8正确支持它.IE 6-7只允许在自然内联元素上设置它，但有一些黑客可以解决这个问题。

There are other options you have, you can either float it, or set position: absolute on it, but these also have other effects on layout, you need to decide which one fits your situation better.

你有其他选择，你可以浮动它，或者设置位置：绝对值，但这些也会对布局产生其他影响，你需要决定哪一个更适合你的情况。

inline-block jsFiddle Demo
内联块jsFiddle演示

#2

You could try using float:left; or display:inline-block;.

你可以尝试使用float：left;或显示：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-block will have less of an impact though, so probably best to try that first.

但请注意，它们也会对周围元素的布局产生影响。我建议inline-block虽然影响较小，但最好先尝试一下。

#3

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

支持正在快速增长，所以当edge决定实现它时，它会非常棒：http：//caniuse.com/#search=intrinsic

#4

EDIT2- Yea auto fills the DOM SOZ!

EDIT2- Yea auto填充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/

and this page

和这个页面

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

所以

 min-height: 400px;

#1