Question

在一组HTML页面中，这些页面包含一些需要背景颜色的重要文本。这可以发生在页面的任何地方。

我还有一个必须在每个页面上浮动的图像。文字必须环绕这张图片。

有时需要背景颜色的文本需要环绕浮动图像。

问题是文本的背景颜色在图像下方延伸。像这样：

background/float problem

这是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中使用。

Answer 1

只需将overflow: hidden;添加到importantText类。

请参阅this demo fiddle。

在IE7，IE8，IE9，Opera 11.50，Safari 5.0.5，FF 5.0，Chrome 12.0的Win7上测试过，但由于这是基本的溢出功能，我确信它适用于所有其他所需的浏览器版本。< / p>

Answer 2

当元素为display:inline时，我认为没有办法做到这一点。您需要在display:block上设置<p>，否则我相信浮动会使背景不会延伸100％的页面宽度

Answer 3

你能不能在importantText类上加一个宽度？

http://jsfiddle.net/S7XDX/

背景颜色比文本延伸得更远，并且在浮动元素下面

3 个答案: