텍스트 전체에 여러 플로트 이미지 제공

CSS에 문제가 있으며 자바 스크립트없이 원하는 것이 있다고 생각하지만 확실하지 않습니다.텍스트 전체에 여러 플로트 이미지 제공

0-3 개의 이미지로 표시하려는 텍스트 기사가 있습니다 (번호는 각 기사에 대해 동적 임). 나는 3 개의 이미지를 모두 페이지의 오른쪽에 표시하고 그 사이에 약 200-300 픽셀을 표시하려고합니다. 이 정도는 분명하고 여백을 사용하여 이미지를 떠 다니는 것만으로도 달성했습니다.

내가 할 수 없었던 부분은 텍스트가 200 ~ 300px 상당의 이미지 사이를 흐를 수 있도록 허용하는 것입니다. 이미지를 상대방이 원하는 페이지 부분으로 푸시 (push)하기 위해 상대 위치 지정을 시도했으나, 텍스트를 플로팅하여 빈 공간을 그대로 두었다가 (예 : 이미지가 텍스트 상단에서 끝나는 경우) .

js 없이도 가능합니까? 텍스트도 완전히 동적이므로 텍스트의 요소를 앵커로 사용할 수 없습니다.

편집 :

태그 :

<div> 
    <img class="floater" src="get_file.asp?image=1"/> 
    <img class="floater" src="get_file.asp?image=2"/> 
    <img class="floater" src="get_file.asp?image=3"/> 
    <p>lots and lots of text and paragraphs go here....</p> 
</div>

CSS의 : 여기에 조금 설명하는 몇 가지 코드의

.floater 
{ 
    float:right; 
    height:250px; 
    clear:both; 
    margin-top:200px;//This creates space between the images, but the text doesn't flow between them 
}

출처

2011-10-07 Indigenuity

코드를 게시 할 수 있습니까? – KryptoniteDove

여분의 도우미 요소 만 사용하면됩니다. 이 바이올린의

봐 : http://jsfiddle.net/kizu/BwySX/

그들의 높이와 부유물을 추진하고있다, 그래서 당신은 그냥 제로 폭 도우미 요소를 추가,하지만 제로 폭을 가지고, 텍스트가 거의 완벽 그 근처에 흐른다.

출처

2011-10-07 22:05:28 kizu

나를 위해 일합니다. 많이 감사합니다 !! – hkasera

그 가능성이 확실하지. 마진은 항상 모든 것을 측면으로 밀어 넣습니다.

나는 텍스트를 단락으로 나누고 단락마다 단 하나의 이미지 만 갖습니다. 그러면 이미지가 그 안에 떠있을 수 있습니다.

출처

2011-10-07 15:26:18

글자는 단락으로 나뉘어져 있지만 미리 생성되어 있으므로 순서가 보장되지 않습니다. 단락과 혼합 된 div, 태그 등이 있습니다. 왼쪽 정렬 된 머리글 태그의 오른쪽 가장자리에 띄우고 싶지 않으므로 일반 요소를 잡고 그 안에 떠있을 수 없습니다. 잠시 동안이 일을 생각했습니다. – Indigenuity

텍스트 전체에 여러 플로트 이미지 제공

답변

관련 문제