Как настроить ширину DIV для содержимого

У меня есть элемент div со стилем:

.mypost {
    border: 1px solid Peru;
    font-family: arial;
    margin: auto;
    min-width: 700px;
    width: 700px;
}

Я размещаю содержимое сообщения WordPress внутри блока DIV, но для простоты предположим, что внутри DIV есть только один <img>. Я хочу, чтобы мой div имел минимум ширину 700 пикселей и регулировал ширину, если изображение больше 700 пикселей.

Каковы мои варианты для достижения этого? Пожалуйста, совет.

UPDATE

Смотрите мою скрипку http://jsfiddle.net/cpt_comic/4qjXv/

Ответ 1

Один из способов достижения этого - установка display: inline-block; на div. По умолчанию элемент block, который всегда будет заполнять ширину, которую он может заполнить (если не указать width, конечно).

inline-block Единственным недостатком является то, что IE поддерживает его корректно с версии 8. IE 6-7 позволяет устанавливать его только естественно inline, но есть хаки, чтобы решить эта проблема.

Существуют и другие варианты, вы можете либо float, либо установить на нем position: absolute, но они также имеют другие эффекты при компоновке, вам нужно решить, какой из них лучше подходит для вашей ситуации.

inline-block jsFiddle Demo

Ответ 2

Вы можете попробовать использовать float:left; или display:inline-block;.

Оба эти параметра изменят поведение элемента от значения по умолчанию до 100% до значения по умолчанию для естественной ширины его содержимого.

Однако обратите внимание, что они также будут влиять на расположение окружающих элементов. Я бы предположил, что inline-block будет иметь меньшее влияние, поэтому, вероятно, лучше всего попробовать это в первую очередь.

Ответ 3

Я хотел бы добавить к другим ответам это довольно новое решение:

Если вы не хотите, чтобы элемент стал встроенным блоком, вы можете сделать это:

.parent{
  width: min-content;
}

Поддержка быстро растет, поэтому, когда ребро решает ее реализовать, это будет действительно здорово: http://caniuse.com/#search=intrinsic

Ответ 4

EDIT2- Автозаполняет DOM SOZ!

#img_box{        
    width:90%;
    height:90%;
    min-width: 400px;
    min-height: 400px;
}

ознакомьтесь с этой скриптой

~~http://jsfiddle.net/ppumkin/4qjXv/2/~~

http://jsfiddle.net/ppumkin/4qjXv/3/

и на этой странице

http://www.webmasterworld.com/css/3828593.htm

Удален оригинальный ответ, потому что он был неправильным.

Ширина в порядке, но высота сбрасывается до 0

так

 min-height: 400px;