[英]Problems Wrapping Text Around Image
I'm wrapping text around an image using markup something like this:我使用这样的标记将文本环绕在图像周围:
CSS: CSS:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
HTML: HTML:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="..." alt="..." />
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
This actually looks okay except that, if the text is shorter than the height of the image, my page footer is also wrapped around the image.这实际上看起来不错,只是如果文本比图像的高度短,我的页脚也会环绕图像。
I want my footer to appear below the image.我希望我的页脚出现在图像下方。 If I add
<p style="clear:both"> </p>
to clear the float, then I have too much space above my footer.如果我添加
<p style="clear:both"> </p>
来清除浮动,那么我的页脚上方空间太大。
How can I clear the float and force any subsequent markup below my image without adding any more whitespace?如何在不添加更多空白的情况下清除浮动并强制在图像下方添加任何后续标记?
Add overflow: hidden
to the CSS for the paragraph that contains the floating image.为包含浮动图像的段落添加
overflow: hidden
到 CSS。 That will make the paragraph grow to fully contain the floated image.这将使段落增长到完全包含浮动图像。 For example:
例如:
<h2>Author Information</h2>
<p class="inner">
<img id="imgAuthor" src="http://placekitten.com/200/200">
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
And:和:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
p.inner {
overflow: hidden;
}
And a live version: http://jsfiddle.net/ambiguous/S2yZG/还有一个现场版: http://jsfiddle.net/ambiguous/S2yZG/
Alternatively, you could stick a <div style="clear: both;"></div>
right at the bottom of the paragraph but you should only use this in cases where you need the overflow
to be something other than hidden
.或者,您可以在段落底部粘贴一个
<div style="clear: both;"></div>
,但您应该只在需要overflow
不是hidden
的情况下使用它。 For example:例如:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="http://placekitten.com/250/200">
<b>Bob Smith</b>
<div class="cBoth"></div>
</p>
<p>
Here is some bio information about the author...
</p>
And:和:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
.cBoth {
clear: both;
height: 1px;
}
And a live version of this approach: http://jsfiddle.net/ambiguous/3yGxA/这种方法的现场版本: http://jsfiddle.net/ambiguous/3yGxA/
Why does overflow:hidden
work?为什么
overflow:hidden
工作? From the CSS3 specification :从CSS3 规范:
The border box of a table, a block-level replaced element, or an element in the normal flow that is a flow root (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same flow as the element itself.
表格的边框框、块级替换元素或作为流根的正常流中的元素(例如具有“溢出”而不是“可见”的元素)不得与同一流中的任何浮动重叠作为元素本身。 If necessary, implementations should clear the said element by placing it below any preceding floats [...]
如有必要,实现应通过将其放置在任何前面的浮动下方来清除所述元素 [...]
Your <p style="overflow: hidden;">
satisfies the third condition so its bounding box is extended below the bottom of the floating image so that there is no overlap.您的
<p style="overflow: hidden;">
满足第三个条件,因此它的边界框延伸到浮动图像的底部下方,因此没有重叠。
You were on the right path to try <p style="clear:both"> </p>
but all you need to do is change the height and margins.您在尝试
<p style="clear:both"> </p>
的道路上是正确的,但您需要做的就是更改高度和边距。
<div style="clear:both; height:1px; margin:0;"></div>
alternatively you can just add clear: both
to the footer style and forget this markup.或者,您可以在页脚样式中添加
clear: both
并忘记此标记。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.