Изображение не будет оставаться внутри границы раздела

Question

Веб-сайт: isfnpub.com

Сейчас я использую дополнительные отступы, чтобы подогнать изображение, но, как вы видите, функция div полностью игнорирует изображение.

Я работаю в Wordpress.

Используемый код:

<div style="border: 5px solid #FFC85D; padding: 10px; margin:30px;">

<p><strong>UPCOMING RELEASE: ISFN ANTHOLOGY #1</strong></p>

<p>[caption id="attachment_801" align="alignright" 
width="189" 
caption="Click image for full cover spread."]
<a href="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-full.jpg" 
target="_blank">
<img src="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-189x300.jpg" 
alt="" 
title="Anthology 1 front" 
width="189" height="300" 
class="size-medium wp-image-801" /></a>
[/caption]
<strong>Authors: </strong> blah blah blah.</p>

<p><strong>Cover Art By:</strong> Xenia Latii</p>

<p>blah blah blah</p>

</div>

Я хочу, чтобы граница div естественным образом оборачивалась вокруг всего содержимого, включая изображение. Без дополнительных отступов изображение перекрывает границу и все выглядит безобразно.

Спасибо.

РЕДАКТИРОВАТЬ: Я использовал <div style="overflow:auto; ..."> и, похоже, работает. Это подходящее решение или у меня будут проблемы позже?

Answer 1

Если я правильно понимаю, то думаю, что это то, что вам нужно.Попробуйте использовать overflow:hidden, который должен решить вашу проблему.

Answer 2

Попробуйте переполнение: скрытый и установите ширину div, например, 300px, затем установите ширину изображений на 100%.

Answer 3

Оба предложенных варианта переполнения просто обрезают часть изображения, находящуюся за пределами div, вместо того, чтобы подгонять изображение под размер, что и должно происходить.Я обнаружил, что использование свойств div float-none, похоже, помогает.