2 div의 콘텐츠를 배치하는 방법은 무엇입니까?

이것은 신참 문제 일 수도 있지만 실제로 해결할 수는 없습니다. 사진이있는 div와 사진이있는 div가 있습니다. 부모 div의 사진과 자식 div의 사진의 크기를 조절했습니다. 나는 브라우저의 모서리를 드래그하여 크기를 조정하면2 div의 콘텐츠를 배치하는 방법은 무엇입니까?

<div style="width:100%; height:100%; position:relative; top: 0px; left: 0px;"> 

      <img style="width:100%" src="img/imgSera/photo1.png" /> 

     <div style="width:30%; height:30%; position:absolute; top: 191px; left: 305px;"> 
      <img style="width:30%" src="img/imgSera/photo2.png" /> 
     </div> 
</div>

, 나는 브라우저의 크기가 변경되지 않은 경우 같은 위치에 있도록하고 싶습니다. 내가 뭘 놓치고 있니? 희망은 나 자신을 이해하게했다. 미리 감사드립니다!

출처

2016-09-02 magn

위치가 고정 되었습니까? – Styl

사진 2의 위치를 페이지의 어딘가에 배치하고 크기를 조정할 때 해당 위치를 유지하려고합니다. :) – magn

이미지의 너비와 높이를 고정시키고 싶습니까? 코드를 사용하여 브라우저의 크기를 조정하면 이미지가 얇아지는 것을 보았습니다. – Anami

고정 위치로 충분할 수 있습니다.

  <img style="width:100%" src="img/imgSera/photo1.png" /> 

     <div style="width:30%; height:30%; position:fixed; top: 191px; left: 305px;"> 
      <img style="width:30%" src="img/imgSera/photo2.png" /> 
     </div> 
</div>

출처

2016-09-02 10:22:01 Styl

당신은 이미지가, 왼쪽 상단에 남아있는 상대적 위치 DIV 내부 position:absolute와 top:0 및 left: 0으로 위치를 고정하십시오. 해당 요소에 대해 픽셀 기반 위치 지정을 사용했고 래퍼는 백분율을 기반으로했습니다. 큰 외곽 이미지가 창 (퍼센트)으로 스케일되면 작은 요소의 위치가 바뀌는 것처럼 보입니다 (픽셀 기반 위치 때문에).

또한 내부 컨테이너와 이미지의 너비가 30 %입니다. 컨테이너 자체만으로 크기를 제어 할 수 있습니다. 그래서 내부 컨테이너를 30 %로 설정했습니다. 외부 용기 폭의 30 %입니다. 내부 이미지는 100 %로 설정되어 있으므로 30 % 컨테이너의 너비가 채워지며 두 이미지는 브라우저 창과 함께 크기가 조정되고 작은 이미지는 구석에 유지됩니다.

<div style="width:100%; height:100%; position:relative; top: 0px; left: 0px;"> 
 

 
      <img style="width:100%" src="http://placehold.it/300" /> 
 

 
     <div style="width:30%; height:30%; position:absolute; top: 0; left: 0;"> 
 
      <img style="width:100%" src="http://placehold.it/250/fc0000/000000" /> 
 
     </div> 
 
</div>

https://jsfiddle.net/treetop1500/tdk8ofsr/

또한 상위에 대한 백분율을 사용하고 오른쪽 구석에 그것을 원하지 않는 경우, 왼쪽 수 있습니다

<div style="width:100%; height:100%; position:relative; top: 0px; left: 0px;"> 
 

 
       <img style="width:100%" src="http://placehold.it/300" /> 
 

 
      <div style="width:20%; height:30%; position:absolute; top: 20%; left: 20%;"> 
 
       <img style="width:100%" src="http://placehold.it/250/fc0000/000000" /> 
 
      </div> 
 
    </div>

https://jsfiddle.net/treetop1500/b34r4rde/

출처

2016-09-02 10:32:34

예,하지만 하위 div의 위쪽 및 왼쪽 속성이 0이 아닌데 왜 작동하지 않습니까? – magn

정확히 작동하지 않는 것은 무엇입니까? 당신은 당신의 코드를 배우는가? –

원본에서는 div 세트의 위치를 픽셀로 설정했습니다. 그래서 바깥 쪽 이미지가 비례하므로 (너비가 브라우저 창이나 컨테이너의 100 %이므로) 내부 요소의 위치가 제대로 작동하지 않습니다. 픽셀은 크기가 조정되지 않기 때문입니다. 두 가지 모두에서 퍼센트를 사용해야합니다. 위에 게시 한 두 번째 발췌 문장을 참조하십시오. https://jsfiddle.net/treetop1500/b34r4rde/ –

2 div의 콘텐츠를 배치하는 방법은 무엇입니까?

답변

관련 문제