div 지금 당장 센터에서 아래로 내림

Question

확대 (Ctrl + 마우스 스크롤)를 한 번하면 내 콘텐츠를 내리고 내 콘텐츠 센터에서는 바로 내 콘텐츠를 내 보냅니다.

그래서 저는 #div를 서로 옆에두고 오른쪽으로 #div를 놓고 한 번 줌하면 #div가 오른쪽으로 #div를 누르고 #div 오른쪽으로 가면 바로 맞 춥니 다. 여기

죄송 복사 http://jsfiddle.net/Tedeee/bBpEm/

HTML

<div id="top"> 
    &nbsp;<br /> 
    hi 
</div> 
<div id="outer"> 
    <div id="right">right</div>  
    <div id="left">left</div> 
</div> 

CSS

div { 
    outline: red 1px solid 
} 

#right { 
    width: 200px; 
    height: 200px; 
    float:left; 
    background-color:red; 
} 

#left { 
    width: 200px; 
    height: 200px; 
    float:left; 
    background-color:grey; 
} 

#outer { 
    float:left; 
    clear:both; 
    text-align: center; 
} 

샘플 웹 사이트 이 일을보고 시도에 붙여 내 jsfiddle입니다 전자 홈 섹션 https://coderwall.com/welcome

내 div가 # 오른쪽 div가 중앙으로 이동하지 않을 때까지 밀어 넣은 것을 볼 수 있듯이. 그리고 한번 밀어 넣으면 중심에 두어야합니다.

어떻게해야합니까? 정말 도움이 필요합니다. 감사.

Answer 1

div을 inline-block으로 표시해보십시오.

는 JSFiddle

업데이트 이것은 몇 가지주의와 함께 제공됩니다. inline-block 요소는 공백을 감싸며 공백이 있습니다. 내 선호하는 방법은 inline-block 요소에 margin-right: -0.36em;을 추가하는 것입니다. 당신이 찾아 볼 수있는 다른 수정 사항들이 있습니다.

HTML

<div id="top">&nbsp;<br />hi</div> 
<div id="outer"> 
    <div id="right">right</div>  
    <div id="left">left</div> 
</div> 

CSS

div { outline: red 1px solid } 
#outer { 
    text-align: center; 
} 
#right { 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    background-color: red; 
} 
#left { 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    background-color:grey; 
} 

에게 다음과 같이

기본 구조는