이미지가 끝난 후 텍스트의 들여 쓰기 상태를 유지하는 방법

WordPress의 캡션과 정렬 된 이미지가 있습니다 (코드는 아래 참조). 하단의 <div> 태그가 동적으로 표시됩니다 (한 번에 하나씩 만 표시됨). 사람이 보여줄 때, 그것은 이미지의 바닥을 지나쳐 튀어 나오고, 따라서 텍스트의 일부는 이미지의 오른쪽으로 가고 파트는 이미지의 바로 아래 왼쪽으로 줄을 감았습니다. 줄 바꿈을 하드 코딩하지 않고 이미지를 왼쪽으로 감쌀 수 없도록하는 간단한 방법이 있습니까? 여기 이미지가 끝난 후 텍스트의 들여 쓰기 상태를 유지하는 방법

은 원유 예입니다 (옵션 1을 선택하거나 드롭 다운에서 옵션 2) :

<div style="margin-top: -50px;"> 
[caption id="" align="alignleft" width="200"]<a href="LINK"> 
<img alt="alt" src="LINK" title="title" width="200" height="257"></a> 
Click the image to view it full size[/caption] 
A bunch of random text.<br> 
<br> 
<form> 
<select id="choices"> 
    <option value="none">Select an option...</option> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3">Option 3</option> 
    <option value="option4">Option 4</option> 
    <option value="option5">Option 5</option> 
    <option value="option6">Option 6</option> 
    <option value="option7">Option 7</option> 
</select> 
</form> 
<div id="option1" class="hide">Option 1 TEXT</div> 
<div id="option2" class="hide">Option 2 TEXT</div> 
<div id="option3" class="hide">Option 3 TEXT</div> 
<div id="option4" class="hide">Option 4 TEXT</div> 
<div id="option5" class="hide">Option 5 TEXT</div> 
<div id="option6" class="hide">Option 6 TEXT</div> 
<div id="option7" class="hide">Option 7 TEXT</div>

JSFIDDLE

출처

2012-09-15 vaindil

당신이 [JS 바이올린 (http://jsfiddle.net/에서 (간단한 ([SSCCE] (http://sscce.org/)) 라이브 데모를 추가 할 수 있습니다 : 여기

업데이트 된 피들러의), 또는 이와 유사한) 귀하의 문제를 설명하기 위해? –

여기 있습니다. 그것을 제공하지 않아서 미안해! 그것은 정말 조잡한 예제이지만, 그것이 의미하는 바를 보여줍니다 (드롭 다운에 옵션 1 또는 옵션 2 사용). http://jsfiddle.net/F7JzJ/ – vaindil

이미 img 왼쪽 떠 있고, 그것이 가장 쉬운 방법 폭의 알고으로 div에 들여 쓰기를 원하는 모든 것을 래핑하고 해당 래퍼 div에 margin-left을 추가하는 것입니다. http://jsfiddle.net/F7JzJ/1/

출처

2012-09-16 00:37:24 Krycke

그게 효과가 있습니다! 정말 고맙습니다! – vaindil

이미지가 끝난 후 텍스트의 들여 쓰기 상태를 유지하는 방법

답변

관련 문제