背景颜色比文本延伸得更远,并且在浮动元素下面
RPN*_*nja 4 css background-color css-float
在一组HTML页面中,这些页面包含一些需要背景颜色的重要文本.这可以发生在页面的任何地方.
我还有一个必须漂浮在每一页上的图像.文本必须环绕此图像.
有时需要背景颜色的文本需要环绕浮动图像.
问题是文本的背景颜色在图像下方延伸.像这样:
这是html和CSS:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Problem</title>
<style type="text/css">
.main{ width:500px; }
.floater { height:200px; width:200px; background-color:#C00; float:right; clear:left; margin:10px; padding:10px; overflow:hidden; }
.importantText { background-color:#333; color:#FFF; padding:5px; font-weight:bold; }
</style>
</head>
<body>
<div class="main">
<div class="floater">
[An image here]
</div>
<p class="plainText">Integer luctus, nunc vel condimentum ornare, mi eros vehicula nisl, non adipiscing enim risus sit amet urna. </p>
<p class="importantText">In hac habitasse platea dictumst. Fusce nec felis lorem. Fusce mollis ante elit, at tempor ipsum. Ut imperdiet libero sed sem rutrum rhoncus mattis erat aliquam. Aenean bibendum tincidunt erat sit amet varius. Vivamus sed arcu vitae magna aliquet porttitor quis sed augue. </p>
<p class="plainText">Fusce molestie dignissim libero vehicula egestas. Suspendisse porta, felis et auctor suscipit, quam mi facilisis odio, id tempus lorem leo ac quam. Proin rhoncus dignissim eros, et commodo ante rhoncus sit amet.</p>
</div>
</body>
</html>
我尝试了许多不同的解决方案,但没有找到适用于这个特定问题的工作.有没有办法让背景颜色适合文本(而不是在图像下)？可以用CSS或JavaScript(访问jQuery)来解决这个问题吗？该解决方案需要在IE7 +,FF4 +,Safari3 +和最新的Chrome中运行.
| 归档时间： |
|
| 查看次数： |
2660 次 |
| 最近记录： |