CSS 이미지를 푸시 오버 텍스트

Question

나는 하루 쉬어야합니다, 나는 CSS로 혼란스러워하고 있어요.

이미지가 있거나 존재하지 않을 수 있습니다. 최소한의 마크 업으로 너무 긴 경우 이미지 아래에 감싸지 않도록 전체 텍스트 블록을 밀어 넣고 싶습니다. 일반적으로 이미지를 플로팅하고 여백을 사용하는 것이 좋지만 이미지가 없기 때문에 가끔 더 유연한 솔루션을 원합니다. 어쩌면이 그림이 도움이 될지도 모른다.

나는 여분의 마크 업 또는 동적으로 두 개의 서로 다른 클래스를 사용하지 않고 그것을 할 수있는 방법을 생각할 수 없다. 내가 시도한 대부분은 하나 또는 두 요소를 떠 다니는 것을 포함한다. p는 설정 길이가 없으므로 img 아래에 패딩 하단을 두는 것이 경우에 따라 충분하지 않거나 p가 너무 짧으면 불필요한 공간을 만듭니다. 어떤 제안?

편집 : 여기 마크 애덤스의 jsfiddle 호의가 있습니다. 그러나 그것은 내가 갇혀있는 곳입니다.

JSFiddle

Answer 1

당신은 왼쪽 이미지 플로트를 만들 수 있습니까? 또는 귀하의 질문에서 뭔가를 놓치고 있습니까? 이처럼

:

http://jsfiddle.net/cGQ6K/

편집 - 또는 같은 단락 또는 무언가에 오버 플로우가 있다면 이미지가 사라 할나요?

내 jsfiddle 내 단락에 더 많은 텍스트를 추가 EDIT2 - 후 나는 해결책을

EDIT3을 해결하려고합니다 ... 난 당신이 지금 무슨 뜻인지 알 것 같아요 - 여기 당신이 원하는 솔루션은 다음과 같습니다 http://jsfiddle.net/cGQ6K/7/ 그것은 약간의 해킹을 사용합니다.

Answer 2

마크 아담스 예제가 작동 한 이후로 문제가 발생하는 이유를 모르겠지만 어떤 경우에는 "clear"CSS 속성으로 해결할 수 있다고 생각합니다.

우리는 대부분 "clear : both"를 사용하지만 이미지에 대해 "clear : right"또는 "right"를 시도 할 수 있습니다. http://www.w3schools.com/cssref/pr_class_clear.asp