How can I adjust DIV width to contents

问题:

I have a div element with style attached:

.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.

What are my options to achieve that? Please advice.

UPDATE

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

回答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).

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.

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

回答2:

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

回答3:

You could try using float:left; or 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.

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.

回答4:

EDIT2- Yea auto fills the 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/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

so

 min-height: 400px;