문제 - 우수한 라이브러리

나는이 질문에 대한 "거의"대답을 많이하지만 내 특정 문제에 도움이 아무것도 ... 문제

는 내가 중심 #와 웹 페이지를 발견했다 크기가 1024px 인 콘텐츠 래퍼 내가 원하는 것은이 래퍼의 뒤에 또 다른 div를 배치하는 것입니다.이 div 래퍼는 가운데에 배치되고 약간 넓어집니다. # 그래픽이 있는데 # content-wrapper의 왼쪽면을 실행하고 싶습니다.하지만 # content-wrapper가 필요합니다. 너비는 1024px입니다. 이 그래픽을 몸체 배경에 넣거나 브라우저의 크기를 조정할 때 # content-wrapper와 함께 이동해야하므로 절대적으로 배치 할 수 없습니다.

제 문제는 # content-wrapper와 #prints라고하는 더 큰 div를 상대적으로 배치하고 양쪽 모두에 z- 색인을 적용했기 때문입니다. 그러나 절대 위치 지정을 #prints에 적용하지 않으면 플로트 된 요소처럼 동작하고 내 # content-wrapper 위로 점프합니다. 나는 상대방에게 시체 위치를 설정하려했지만 도움이되지 않습니다.

이 작업을 수행 할 수있는 방법이 필요한지 또는 작동하지 않을 작업을하려고 할 때 혼란 스러울지를 알아야합니다.

내 (단순화 된) 마크 업은 다음과 같습니다. HTML :

<body> 

<div id="prints"></div> 

<div id="content-wrapper"> 

<!-- Content here --> 

</div> 

</body>

는 CSS :

#content-wrapper { 
width: 1088px; 
min-height: 800px; 
height: auto; 
overflow: hidden; 
margin: 0px auto 0px auto; 
position: relative; 
z-index: 99; 
} 

#prints { 
width: 1212px; 
position: relative; 
z-index: -99; 
margin: 0px auto 0px auto; 
height: 881px; 
background-image: url(images/bg-prints.png); 
}

출처

2011-05-11 Devonanne

코드에서 # content-wrapper의 너비는 1024px가 아니지만 너비는 1088px입니다. 또한 # content-wrapper에는 배경 이미지가 없지만 배경 이미지는 #prints에 있습니다. Content-wrapper의 왼쪽에서 이미지가 수직으로 반복되기를 원하십니까? – Jawad

가 왜 이렇게하지?

<div id="prints"> //the div behind 
    <div id="left-side-graphic"> </div> 
    <div id="content-wrapper"> </div> 
</div>

두 개의 div가 부동 소수점 왼쪽에 있고 그에 따라 '인쇄물'크기가 조정되어 div가 인라인 상태를 유지합니다.

출처

2011-05-11 19:47:29 kei

나는 이것을 권하고 나서 인쇄물 div가 깨끗한 div를 추가하기 전에 인쇄물의 높이가 내용의 하단까지 이어 지도록한다. '

' –

이런 식으로하고 싶은 것 같습니다. http://jsfiddle.net/PD6HK/ #prints는 # content-wrapper 뒤에 있습니다. 2. #prints는 # content-wrapper보다 약간 넓습니다. 3. #prints 및 # content-wrapper가 중심에 있고 브라우저 창으로 이동

나는이 경우 http://jsfiddle.net/PD6HK/1/과 같은 것을 시도해 보았습니다. 기본적으로 위의 #prints가없는 동일한 작업을 수행하는 것처럼 들립니다. content-wrapper의 패딩으로 인해 내용이 "정확하게"중앙에 배치되지 않습니다.

출처

2011-05-11 20:29:08 IMI

문제

답변

관련 문제