내가 가진 다른 해상도

Question

의 사업부를 중심으로 속성 사업부는 노호 :

.rightbar{ 
    width:222px; 
    padding-bottom:10px; 
    float:right; 
    margin-top:10px; 
    margin-right: 10px; 
} 

그래서 먼저 떠 내 : 그것을 왼쪽

.videosHolder { 
width:970px; 
padding:5px; 
float:left; 
} 

지금은 속성과 다른 사업부가 괜찮아요, 두 번째 오른쪽 수레하지만이 공간을 화면 해상도에 따라 달라집니다 .videosHolder 공간 뒤에 센터 싶습니다. 내 화면 해상도가 1300px이고 첫 번째 div의 크기가 970px 인 경우 330px의 공간에 두 번째 div를 중심에 배치해야합니다. 따라서 330px - 222px = 108px이지만 내 해상도가 1600px 인 경우이 108px 공간은 다른 수입니다.

고맙습니다!

Answer 1

당신이

HTML처럼 뭔가를 할 수 :

이

<div id="right"> 
    <div id="right-center"> 
     test test 
    </div> 
</div> 

<div id="left"> 
    test test 
</div> 

CSS :

#left 
{ 
    width: 100px; /* You can change this to 970px */ 
    background-color: red; 
} 

#right 
{ 
    position: absolute; 
    left: 100px; /* You can change this to 970px */ 
    right: 0; 

} 

#right-center 
{ 
    margin: 0 auto; 
    width: 80px; /* You can change this to 222px */ 
    background-color: blue; 
} 

가 직접보기 : http://jsfiddle.net/8QYfa/3/

Answer 2

rightbar 안에 rightbar-inner div로 div를 추가하고 div에 가운데와 너비를 지정하십시오.

그런 다음 div를 videosHolder 클래스로 플로팅하십시오. 그리고 videosHolder의 width와 동일한 rightbar 사업부의 margin-right 설정 (당신이 변수에 폭을 저장하고 폭을 설정하는 것을 사용할 수 있습니다 당신이 작거나 SASS 같은 컴파일러를 사용하는 경우를 여백 오른쪽)

이 예제를 참조하십시오. div의 너비를 더 작게 만들었으므로 테스트하기가 더 쉽습니다. 브라우저의 크기가 아닌 페이지의 중앙에있는 veritcal 선의 크기를 조정하면 오른쪽 막대 내부가 중앙에 머물러있는 동안 오른쪽 막대의 크기가 조정되는 것을 볼 수 있습니다.

http://jsfiddle.net/gwHC2/1/