배경색이 텍스트보다 확장되어 부동 요소 아래에 있습니다.

배경색이 필요한 중요한 텍스트가있는 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에서 작동해야합니다.

출처

2011-07-05 RPNinja

+1 매우 명확하게 공식화 된 질문입니다. – NGLN