다른 가운데에있는 div 옆에 div 추가

Question

가운데에있는 다른 div의 오른쪽에 div를 추가하고 싶습니다. 그림과 같이 :

지금까지이 HTML을 가지고 :

이

<div id= "top-menu-wrapper"> 
    <div id="top-menu">  
    </div> 
    <div id="social"> 
    </div> 
</div> 

가 CSS :

당신의 폭이 고정되어 있기 때문에

#header #top-menu { 
    display   : inline-block; 
    width    : 764px; 
    height   : 55px; 
    margin   : auto; 
} 

#header #social { 
    display   : inline-block; 
    width    : 100px; 
    height   : 55px; 
    margin-left  : 25px; 

} 

#header #top-menu-wrapper { 
    display   : block; 
    text-align  : center; 
    margin-bottom  : 25px; 
} 

Answer 1

, 단지 왼쪽을 계산 오프셋 (offset) 각 div의 왼쪽 여백을 중앙 정렬을 사용하지 않고 입력하십시오.

컨테이너 액이 중심을

(top container width - central div width)/2)의 폭 (즉 오른쪽에있는 나머지 공간을 나타냄)와 오른쪽 떴다 하위 컨테이너 내부의 문제 사업부 인 경우

또는

당신은 아마 만들어 줄게 자바 스크립트 창 크기 조절 리스너를 사용하여 모든 크기 조정 이벤트에서 위치를 다시 계산하는 것이 가장 좋습니다. (CSS 만 사용하는 것을 선호하지만 최상의 결과를 얻으려면 JS를 제안합니다)

Answer 2

인라인 블록을 사용하여 상자를 표시 할 때 부모는 다음을 가질 수 있습니다. text-align:center; 두 번째 상자의 음수 여백 자신의 너비, 중간에 첫 번째 상자를 가져옵니다.

http://codepen.io/gcyrillus/pen/ADsEx

배경 - 색상 상자 서와 통치자가 시각적으로 수평 센터를 확인하기 위해 추가 위치를 표시하는 데 사용됩니다.

#top-menu { 
    display   : inline-block; 
    width    : 764px; 
    height   : 55px; 
    background  : green; 
} 

#social { 
    display   : inline-block; 
    width    : 100px; 
    height   : 55px; 
    margin-right  : -100px; 
    background  : yellow; 
} 

#top-menu-wrapper { 
    text-align  : center; 
    min-width   : 990px; 
    background  : purple; 
} 
div { 
    vertical-align : top; 
    padding   : 5px 0; 
} 
.ruler { 
    width    : 50%; 
    background  : red; 
    margin   : 5px 0 ; 
} 

이 방법을 사용하면 항상 2 줄을 한 줄에두기를 원하지 않는 한 부모의 너비를 신경 쓰지 않아도됩니다. 그렇다면 min-width : 충분히 넓게 적용 할 수 있습니다. 당신이 그것을 볼 수 있도록

또 다른 해결책 그것은 나를 위해 작동 2 상자에 포장 된 http://codepen.io/gcyrillus/pen/hipBl

body { 
    padding   : 2em; 
    margin   : 0; 
} 
#top-menu { 
    display   : inline-block; 
    width    : 764px; 
    height   : 55px; 
    background  : green; 
} 

#social, #top-menu-wrapper:before { 
    display   : inline-block; 
    width    : 100px; 
    height   : 55px; 
    background  : yellow; 
} 
#top-menu-wrapper:before { 
    content   : ''; 
    height   : 0; 
} 
#top-menu-wrapper { 
    text-align  : center; 
    min-width   : 990px; 
    background  : purple; 
} 
div { 
    vertical-align : top; 
    padding   : 5px 0; 
} 
.ruler { 
    width    : 50%; 
    background  : red; 
    margin   : 5px 0 ; 
}