div와 CSS가 가운데에 정렬되지만 사이드 바 위로 이동하지 않습니다.

-1

브라우저의 가운데에 div를 중심에 놓고 싶지만, 가운데에있는 div가 (사이드 바 위에) 내 사이드 바를 넘기를 원하지 않습니다.div와 CSS가 가운데에 정렬되지만 사이드 바 위로 이동하지 않습니다.

<div>에 대해 절대 위치를 사용하고 있습니다. 나는 친척과 부동으로 노력했지만 결과가 없습니다.

갱신 :

잘 설명하지 죄송합니다,하지만 브라우저 크기 다시 및 만들면 내 질문이었다, 그렇게 작은 중심 내용이 사이드를 통해 간다.

센터링 된 컨텐츠를 중앙에 배치하고 싶지만 브라우저 너비가 작을 때 사이드 바에 겹치기를 원하지 않습니다. 내가 정확히 무슨 뜻인지 잘 모르겠지만, 내 jsfiddle demo을 시도

<body> 
    <div id="sidebar"> sidebar stuff </div> 
    <div id="distance"></div> 
    <div id="content"> 
     <!-- absolutely centered content --> 
    </div> 

</body> 

<style type="text/css"> 
html, body { 
    height: 100%;   
} 
body { 
    text-align: center; 
    padding: 0;   
    margin: 0;   
} 
#sidebar { 
    position:absolute; 
    top:0; 
} 
#distance { 
    margin-bottom: -10em; 
    background: red;  
    width: 1px;   
    height: 50%;   
    float: left;   

} 
#content { 
    position: relative; 
    text-align: left;  
    height: 20em;   
    width: 40em;   
    background: blue;  
    margin: 0 auto;  
    clear: left;   
} 
    </style>

출처

2012-03-14 Mario

센터 div가 사이드 바를 따라가도 괜찮습니까? – w3uiguru

: 여기

는 코드입니다. 당신이 필요로하는 것은 특정 너비의 사이드 바를 가지고 있고 사이드 바를 고려하면서 div를 배치하기를 원한다는 것입니다.

display:inline-block을 사용 했으므로 IE7에서는 작동하지 않습니다. UPDATE : 아래의 COMENT에서 프라 빈 비제이 안가 zoom: 1 및 *display: inline을 추가하는 것은 당신이 질문에서 원하는 정확히 파악하는 IE7

출처

2012-03-14 16:21:10 mkk

OP의 요구 사항을 이해하지 못했습니다. 하지만 여전히 .. 왜 IE7에서 작동하지 않습니다 귀하의 코드를 언급했다. 나는 그렇게 할 것이라고 생각한다. –

@Praaven 때문에 display : inline-block을 사용하기 때문에 작동하지 않습니다. – mkk

괜찮습니다. 쉬운 수정이 있습니다. 줌 추가 : 1; * 디스플레이 : 인라인; –

하드 해결할 것이라고 언급하지만, 여기에 간다 :

http://jsfiddle.net/BFmbQ/4/

<body> 
    <div id="content"> 
     <!-- absolutely centered content --> 
     <div id="sidebar"> sidebar stuff </div> 
    </div> 
</body> 

<style type="text/css"> 
html, body { 
    height: 100%;   
} 
body { 
    text-align: center; 
    padding: 0;   
    margin: 0;   
} 
#sidebar { 
    position:absolute; 
    top:0; 
    right:-200px; 
    width: 200px; 
    height:200px; 
    background: red; 
} 
#content { 
    position:relative; 
    text-align: left;  
    height: 20em;   
    width: 40em;   
    background: blue;  
    margin: 0 auto;   
} 
</style>

사이드 바의 너비가 어떻든간에 올바른 위치를 동일한 양의 음수로 만듭니다.

출처

2012-03-14 17:08:41 Bantros

잘 설명하지 못해 죄송합니다.하지만 제 질문은 브라우저의 크기를 조정하고 크기를 너무 작게 만들면 사이드 바 위에 콘텐츠가 표시된다는 것입니다. 중심에 배치 된 콘텐츠를 가운데에 배치하고 싶지만 브라우저 너비가 작을 때 사이드 바가 겹치지 않습니다. – Mario

문제 없습니다. 네가 내 대답을 확인 했니? 당신이 묻는 것을하는 것처럼 보입니다 - http://jsfiddle.net/BFmbQ/4/ – Bantros

div와 CSS가 가운데에 정렬되지만 사이드 바 위로 이동하지 않습니다.

답변

관련 문제