웹 페이지에서 다른 해상도로 움직이는 이미지/텍스트를 어떻게 정지합니까?

Question

데스크톱 화면이나 TV와 같이 랩톱 화면이 아닌 다른 크기의 디스플레이에서 내 웹 페이지를 볼 때 이미지와 텍스트가 가로로 다른 위치에 있습니다.

<h2><a class="files"> text</a></h2> 




.files { 
font-size: 20px; 
font-family: arial; 
left: 470px; 
position: relative; 
} 

그리고 이미지 : 여기

은 HTML과 CSS 내 텍스트 클래스입니다 또한

<div id="Hipload-Product" class="report"> 
    <img src="<?php echo $MainURL?>img/image1.png" alt="" /> 

    </div> 



.report img { top: 200px; 
margin-left: -500px; 
} 

, 나는 내 사이트의 홈페이지에 갈 때 그것을 이유는 이미지를 표시하는 데 약 4 초가 걸립니까?

감사합니다.

Answer 1

절대 위치 지정을 사용 중입니다. 귀하의 페이지가 다른 모니터 크기로보다 체계적으로 구성되게하려면 상대적 위치 지정을 사용하는 것이 좋습니다. 이 두 가지에 대한 설명은 w3schools: css-positioning 입니다. 유용한 또 다른 기법은 테이블 또는 그리드 시스템을 사용하여 페이지를 특정 요소가 포함 된 일부 영역으로 나누는 것입니다. 960 Grid System