Как обернуть div вокруг изображения?

Я пытаюсь обернуть изображение внутри div, но div расширяется родительским div.Как обернуть div вокруг изображения?

<div id="parent" style="display: inline-block; position: relative; text-align:center"> 
    <div id="wrapper"> 
     <img> 
    </div> 
    <p>Some text that expands the wrapper div more than image width</p> 
</div>

Текстовое поле расширяет родительский div, чтобы он был шире изображения, и это также расширяет оболочку div. Как заставить оболочку div быть точно такой же, как и img?

img или оболочка не имеют поля или прокладки, но оболочка div больше ширины изображения.

источник

2014-12-03 Firze

у вас есть какие-либо другие CSS? –

'div' являются элементами блока, поэтому они будут занимать всю ширину своего родителя. попробуйте установить 'wrapper'' display: inline' или 'float: left', в зависимости от того, как вы хотите его показать. – Rhumborl

@Firze помещает дисплей: встроенный блок на #wrapper. – Gezzasa

Использование display:inline-block на #wrappper

DEMO

источник

2014-12-03 09:17:38

Ох. Я был совершенно уверен, что я уже пробовал, но, очевидно, я этого не сделал. Благодарю. Теперь я чувствую себя немой. – Firze

@Firze Мне нравится добавлять границы к элементам, чтобы я мог точно видеть, что происходит. Надеюсь, вы попробуете мой метод. :) –

Если 'display: inline-block' не работает, попробуйте использовать' display: inline'. –

Вам нужно установить display:inline-block на wraper элемент

<div id="parent" style="display: inline-block; position: relative; text-align:center"> 
    <div id="wrapper" style="display: inline-block;"> 
     <img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/source_code-128.png" />   
    </div>  
    <p>Some text that expands the wrapper div more than image width</p> 
</div>

Если вы хотите сохранить p размер такой же, как изображение, вам нужно использовать некоторые JavaScript или JQuery

$('#parent').css({ 
    maxWidth: $('img').width() 
});

Fiddle

источник

2014-12-03 09:24:04

Как обернуть div вокруг изображения?

ответ

Смежные вопросы