图像不会停留在 div 边框内
网站： 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 边框自然地环绕所有内容，包括图像。如果没有额外的填充，图像会与边框重叠，所有内容看起来都很丑。
谢谢。
编辑：我使用了
Website: isfnpub.com
Right now I'm using extra padding to get the image to fit, but as you see, the div thing is completely ignoring the image.
I'm working inside Wordpress.
Code used:
<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>
I want the div border to naturally wrap around all of the content, including the image. Without the extra padding the image overlaps the border and everything looks uglo.
Thanks.
EDIT: I used <div style="overflow:auto; ..."> and it seems to work. Is this an appropriate solution, or will I run into trouble later on?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果我理解正确，那么我认为这就是您所需要的。
尝试使用
overflow:hidden应该可以解决您的问题。If I understand correctly then I think that's what you need.
Try to use
overflow:hiddenthat should be solve your problem.尝试
overflow:hidden并将div的宽度设置为例如300px，然后将图片宽度设置为100%。Try
overflow: hiddenand set the width of the div to say for example 300px then set the pictures width to 100%.您需要在 div 中设置 img 标签的宽度和高度：
例如
img style="width: 100%; height: 100%;" alt="abc..." src="https://somesite/your_pic.png"
you need set width and height for your img tag in div:
e.g.
img style="width: 100%; height: 100%;" alt="abc..." src="https://somesite/your_pic.png"
这两个溢出选项都建议只剪切掉 div 之外的图像部分，而不是调整图像大小以适应 div 内的情况，而这才是真正需要发生的事情。我发现使用 div 属性
float-none似乎可以解决问题。Both the overflow options suggested just cut off the part of the image that is outside of the div, rather than getting the image to resize to fit within, which is what really needs to happen. I found that using the div properties
float-noneseems to do the trick.