다른 해상도로 위치 유지

안녕하세요, 이미지 갤러리와이 사진의 오른쪽에 표시되어야하는 정보가 있습니다. 나는 둘 다 떠올랐다. 내 기본 해상도는 1366 x 768입니다. 하지만 내가 1024 x 768로 변경하면 정보가 계속 다운되고 다른 사용자의 해상도가 다르더라도 이미지의 오른쪽에 정보를 보관해야합니다. 여기에 코드가 있는데, 어떤 도움을 줄 수 있습니까?다른 해상도로 위치 유지

HTML

<div id="home_page_images"> 
    <div id="home_page_images_slider"> 
     <img src="images/accred_images/image_1.JPG" alt="In the office with the evaluators" /> 
     <img src="images/accred_images/image_2.JPG" alt="Evaluating faculties" /> 
     <img src="images/accred_images/image_3.JPG" alt="CCS students OJT" /> 
     <img src="images/accred_images/image_4.JPG" alt="Packaging of hard documents" /> 
     <img src="images/accred_images/image_5.JPG" alt="Meeting of the evaluators" /> 
    </div> 
</div> 
<div id="home_page_content_frame"> 
    <div id="home_page_content"> 
     <span>Welcome to the QCE and CCE Evaluation System</span> 
     <p>The CCE Evaluation process, also known as "Accreditation", is a voluntary, non-governmental process that includes an external review of a professor’s ability to provide quality programs. It is helpful in many aspects, from ensuring that students are learning relevant material to allowing a school access to funding. Accreditation reviews include self-evaluations, peer-reviews, committee-reviews, and the development of in-depth strategic plans. They also include reviews of a school’s mission, faculty qualifications, and curricula.</p> 
    </div> 
</div>

CSS 귀하의 div의에

#home_page_images { 
    position: relative; 
    width: auto; 
    margin-top: 40px; 
    margin-left: 40px; 
    float: left; 
} 

#home_page_content_frame { 
    float: left; 
    width: auto; 
} 

#home_page_content p { 
    text-align: justify; 
    position:relative; 
}

출처

2014-04-20 user3367225

'# home_page_images'에서'position : fixed'을 시도 했습니까? 그리고 마진 대신에 단순히'top'과'left'를 사용하십시오. –

예. 나는 그것을 시도했다. 내가 아래로 내릴 때 그것의 위치에 머무를 것이다. – user3367225

대신 백분율을 사용하여 그 효과가 있는지 확인하십시오. #home_page_images {float : left; width : 70 %;} #home_page_content_frame {float : left; width : 30 %;} 래퍼 div의 최대 너비를 둘로 설정할 수도 있습니다. 따라서 거친 화면에서 이미지 품질을 손상시키지 않습니다. – robobobobo

, robobobobo 말했듯이 모바일 장치에 그것을 만드는 경우에 당신은하지만, 백분율 대신 픽셀을 사용할 수 있습니다, 당신은 아마 원하는 것 모바일 장치가 소형이기 때문에 미디어 쿼리를 사용하고 데스크톱 장치에 50 % 같은 것을 사용하기로 결정하면 미디어 쿼리의 예가 매우 작습니다.

#div { 
    width:375px; 
} 
@media screen and (min-width: 1366px) { 
    #div {width:375px;} 
} 
@media screen and (min-width: 1440px) { 
    #div {width:428px;} 
} 
@media screen and (min-width: 1600px) { 
    #div {width:434px;} 
} 
@media screen and (min-width: 1920px) { 
    #div {width:540px;} 
}

(min-width: 1920px) 부분을 코드가 차지할 최소 또는 최대 크기로 변경하십시오.

출처

2014-04-20 12:17:00 blackhawk338

다른 해상도로 위치 유지

답변

관련 문제