网站: 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; ...">
,它似乎有效。这是一个合适的解决方案,还是以后会遇到麻烦?
答案 0 :(得分:10)
如果我理解正确,那么我认为这就是你所需要的。
尝试使用应该解决问题的overflow:hidden
。
答案 1 :(得分:1)
尝试overflow:hidden并设置div的宽度,例如300px,然后将图片宽度设置为100%。
答案 2 :(得分:-1)
两个溢出选项建议只切断div之外的图像部分,而不是让图像调整大小以适应内部,这才是真正需要发生的事情。我发现使用div属性float-none
似乎可以解决问题。