플로팅 이미지가 반응하도록 만드는 방법은 무엇입니까?

Question

this fiddle

이 바이올린에 대한 주 관심사는 div # text 및 img.frame입니다. 나는 반응 형 웹 사이트를 만들려고 노력하고 있지만 이것은 오랫동안 내 문제였습니다. 크기를 줄이려고 시도하면서 동시에 텍스트 옆에 img 동작을 만들고 응답 할 수있는 방법을 알아낼 수 없습니다. 브라우저 창 그것이하는 것은 반응하는 행동을하기 전에 본문 아래에 있습니다. 이 문제를 해결할 수있는 방법이 있습니까?

<div id="text">This is some text this is some text this is some text</div> 
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" /> 

Answer 1

텍스트 옆에 이미지가 필요하다는 것을 알고 있으므로 창 크기를 줄이면 이미지와 텍스트 동작이 영향을받지 않습니다.

는 다음과 같은 필요

이

1. 은 컨테이너 사업부 id=img_container주고 스타일의 폭을 확인을
2. 는 AP 내부에 텍스트를 넣어 용기 내부에 이미지를 넣어 스타일을 #img_container img{float: left}
3. 을 제공 (의가 400 픽셀을 가정 해 봅시다) 태그 및 스타일 #img_container (p 또는 div) 및 스타일 지정 (margin-left: same of your img width) + 10

이것은 전체 예제입니다.

<style> 
    #img_container { 
     width: 400px; 
    } 
     #img_container.text { 
      margin-left: 306px; 
     } 
     #img_container img.frame { 
      float: left; 
     } 
</style> 
<div id="img_container"> 

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" /> 
<div id="text">This is some text this is some text this is some text</div> 
</div> 

Answer 2

여기 텍스트와 이미지가 나란히 표시되어 있다고 가정합니다. 잘못된 경우 사과드립니다.

처럼 M. Berro, 내가 먼저 아래와 같이하는 컨테이너 div 안에 두 요소를 둘 것 :

<div id="container"> 
    <p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p> 
    <img src="/image.png" title="An image, aligned right" /> 
</div> 

이미지와 텍스트 옆으로 나란히, 나는대로 다음 CSS를 사용하는 것이 앉아 시작 지점 : 내 예에서

#container {} 
#container p.text { float: left; min-width: 320px; } 
#container img { float: right; margin-left: 20px; } 

, 나는 두 요소의 각 (당신은 물론 확인하기 위해 수레을 취소해야 할 페이지의 구조의 나머지 부분은 그대로 유지에 float를 적용했습니다 - 내가 제안 여분의 빈 divs를 피하기 때문에, Clearfix를 보아라.) 텍스트에 최소 너비를 지정했습니다. 이렇게하면 텍스트가 읽을 수없는 지점까지 축소되지 않습니다.

Answer 3

목표를 위해서는 em 또는 %를 사용하고 인라인 블록을 사용해야합니다. 내가 propely 코드를 삽입 할 수없는 이유
이 몰라이 jsfiddle 봐 jsfiddle.net/geNuR/, 어쩌면 포럼 차단 우리 나라))

Answer 4

당신은 CSS를 max-width: 60%;을 추가하여 시작할 수 .frame에 있습니다. 그것은 완벽하지는 않지만 당신이 성취하고자하는 것과 비슷합니까? javascript/jQuery를 사용하면 더 나은 결과를 얻을 수 있습니다.

Answer 5

유동적 텍스트로 반응하는 이미지의 핵심은 플로트에 의존합니다. 그러나, 핵심은 텍스트가 아니라 img 요소를 플로팅하는 것입니다.

첫째, 그래서 마크 업을 제공, 텍스트 전에 img 태그를 배치 :

<img src="image.jpg" width="294" height="225" class="frame" /> 
<div id="text">This is some text this is some text this is some text</div> 

이 순서의 중요성은 IMG가 오른쪽으로 떠 될 것을, 그 삭제 차단 된 지역의 높이를 제거, 텍스트가 그 위로 그리고 주변으로 흐를 것입니다.

다음으로 텍스트에서 플로트를 제거하여 플로트를 허용하고 플로트를 이미지 오른쪽에 적용합니다. 나는 또한 그 텍스트와 IMG 사이의 마진을주고,주의 할 것이다, 여백은 당신이 스타일주는 IMG에 적용됩니다 : 여기

img { max-width: 100%; height: auto; } 

#text{ width:100px;} 

.frame { 
    float:right; 
    background: #fff; 
    padding: 6px; 
    margin-left:10px; 
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8); 
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8); 
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8); 
} 

는 jfiddle demonstration

입니다