DIV가 오른쪽 이미지가 겹치지 않게하려면 어떻게해야합니까?

두 이미지와 일부 텍스트가있는 문서가 있습니다. 첫 번째 이미지는 왼쪽으로 플로팅되고 두 번째 이미지는 오른쪽으로 플로팅됩니다.DIV가 오른쪽 이미지가 겹치지 않게하려면 어떻게해야합니까?

DIV의 텍스트가 두 번째 이미지와 겹치는 것이 문제입니다. "첫 번째 DIV 두 번째 이미지"첫 번째 이미지 아래 및 두 번째 이미지의 왼쪽에 배치해야합니다 (두 번째 IMG 태그 이후이므로). 내가 뭘 놓치고 있니?

바이올린 : http://jsfiddle.net/yLUnC/4/

example screenshot

HTML : 당신은 모든 자식 요소를 제공 display:inline 및 기타 특수 요소 display: block에게 줄 필요가

<div class="wrapper"> 
    <div>DIV before first image</div> 
    <img class="floatLeft" src="http://placehold.it/200x100&text=First+image"> 
    <div>DIV after first, before second</div> 
    <img class="floatRight" src="http://placehold.it/200x100&text=Second+image"> 
    <div>First DIV after second image</div> 
    <div>text</div> 
    <div>text</div> 
    <div>text</div> 
    <div>text overlapping second image, not good</div> 
    <div>last DIV</div> 
</div>

출처

2013-08-13 Mark

. 가장 중요한 것은 부모 요소에 overflow: auto을 부여하여 두 번째 이미지와 같이 떠 다니는 하위 요소의 높이를 계산하는 것입니다. 그 특별한 요소에 당신이 그 요소에 어떤 클래스를 할당하지 않은 것처럼

, 내가 추가하고 인라인 스타일 : 여기

는 working fiddle

업데이트입니다.

Updated Fiddle (변경이을 필요로하는)

출처

2013-08-13 13:09:30

먼저 눈에 잘 보이는,하지만 지금은 div의 대신 단락 (내 의도)처럼 보이는 한 줄에 모두이다. – Mark

@Mark 앞서 언급했듯이 특별한 요소를 제공하십시오. 'display : 블록'. –

나는 좀 더 일반적인 해결책을 찾고 있는데, 나는 두렵다. 실제 div는 사용자 입력에 따라 변경할 수 있습니다 (텍스트 편집기). – Mark

DIV가 오른쪽 이미지가 겹치지 않게하려면 어떻게해야합니까?

답변

관련 문제