div 주위의 이미지 정렬/감싸기

Question

내가 달성하고자하는 것은 div가 화면 중앙에있는 페이지 (720x360)입니다. 이것은

$(window).height()과 $(window).width()을 사용하는 jQuery로 완벽하게 작동합니다.

다음 부분은 중간 div 주위에 맞게 180x180 이미지를 얻습니다. 이것들은 화면 + 이상을 채 웁니다.

나는 이러한 방법으로 정렬하는 방법에 집착하고 있으며 같은 일을하는 사람의 실제 예를 찾을 수 없습니다.

이렇게해도 될까요?

감사합니다. 도움을 주시면 감사하겠습니다.

Answer 1

<style type="text/css"> 

#main { 
    display: block; 
    margin:0 auto; /* This is make div into center of screen*/ 
    width: 720px; 
    height: 360px; 
    background: #ccc; /* Just for visibility */ 
    position: relative; /* As we want to make other div into center of this */ 
} 

#content { 
    display: block; 
    width: 180px; 
    height: 180px; 
    position: absolute; 
    left: 36.36%; /* You can calculate using math */ 
    /* 
     Total Width - Width 
     So you will get end point now minus half 
     Width/2 = 90 
     Then 720 - 180 = 540 
     And now your box will point to end but you need to divide 
     half of width again 90/2 = 45 
     Result is : 
     180/2/2 = 45 
     720-180-45 = 495 
     180/495*100 = 36.36 
     So this is your width position. 
    * */ 
    top: 25%; 
    /* 
    Same for height but as you can see it's 25% of your value and very easy 
    * */ 
    background: red; 
} 


    </style> 
    <div id="main"> 
    <div id="content"></div> 
    </div>