2011-01-28 1 views
2

테두리가있는 CSS 명령으로 간단한 테두리를 추가하려는 고정 폭 페이지가 있습니다. 그러나이 테두리가 페이지를 풍선처럼 보이게하고 작은 화면에 가로 스크롤 막대가 있도록하지는 않습니다. CSS로는별로 좋지는 않지만, 이미 다른 요소에 테두리를 추가하여 이동하지 않으려 고하는 비슷한 작업을 수행했기 때문에 테두리의 너비를 상쇄하기 위해 음수 여백을 사용하는 방법을 충분히 알고 있습니다. 그러나 주 컨테이너 div에서 모든 작업을 수행하면 모든 것이 중앙에서 벗어나 페이지의 왼쪽으로 잘립니다. 나는 Blueprint CSS 프레임 워크를 사용하고 있는데, 거기에는 내 여백이 엉망이었습니다. 메인 컨테이너가 "여백 : 0 자동"으로 적용된다는 것을 발견했습니다. 그것을 페이지의 중앙에 놓습니다.여백 중심에있는 요소의 음수 여백 : 0 자동;

그래서 지금 레이아웃을 화면 중앙에 배치하면서 페이지에 음수 여백을 어떻게 적용 할 수 있습니까? div에 컨테이너를 랩핑하고 테두리와 음수 여백을 적용하려했지만 주사위를 사용하지 않고 컨테이너 내부에 div를 중첩시키고 컨테이너에 테두리를 적용하려고했지만 그 또한 잘못되었습니다. 누가 여기에 뼈를 던져!

답변

0

음수 여백이 작동하는 경우 고정 폭 및 margin: 0 auto 래퍼 div를 추가하여 센터링을 다시 가져올 수 있습니다.

내 테스트에서 음수 여백은 상자의 너비를 변경하지 않았습니다. 몇 가지 다른 전략 :

  1. 경계로 추가 된 너비를 오프셋하여 너비를 조정하십시오.
  2. 왼쪽 및 오른쪽 테두리를 시뮬레이트하는 div에 배경 이미지를 추가하십시오.
  3. 자바 스크립트를 사용하여 창 너비를 감지하고 필요한 경우 테두리를 제거하십시오.
  4. body { overflow-x: hidden }을 추가하면 가로 스크롤 막대가 표시되지 않습니다.
  5. 충분한 공간이있을 때만 테두리를 추가하려면 CSS3 media query을 사용하십시오 (예 : 이전 브라우저의 경우 JavaScript (# 3 참조)로 다시 폴백 할 수 있음).

업데이트 : 대신에 부정적인 여백, 당신은 아마 경계가 첫번째 장소에있는 요소의 폭에 추가되지 않도록 box-sizing: border-box를 사용할 수 있습니다.

+0

잘 모르겠다. 내 컨테이너에 래퍼 2 개가 있어야한다는 뜻인가? 왜냐하면 당신이 생각하기에 아마도 하나의 래퍼를 추가하는 것이 겠지만, 이것은 사물의 엉망진창입니다! – Milo

+0

@Milo One 래퍼,하지만 그 중 많은 행운이 없었기 때문에 다른 아이디어로 옮겼습니다. 제안 1-5 중 HTML에 아무 것도 추가 할 필요가 없습니다. 그 중 어떤 것이 의미가 있습니까? 4가 가장 간단합니다. 5는 아마도 최고이지만, 아마도 최고입니다. –

+0

나는 # 1을 이해하지만 이것은 페이지 내부의 모든 공간을 사용하기 때문에 가능하지 않으며 국경을 넘어서 더 멀리 훑어 볼 여력이 없다. 배경 이미지를 추가하는 것은 기본적으로 이미지를 볼 수 있도록 페이지 내에서 콘텐츠를 이동해야하므로 1과 같습니다. 3, 나는 JavaScript에 익숙하지 않고 페이지 경계를 위해 시간을 투자 할 것이라고 생각하지 않는다. 5는 너무 복잡하다고 생각합니다. 4 흥미로운 것 같지만 그 의미를 이해하지 못합니다 - 이것은 가로 스크롤 막대가 아무리 표시되지 않는다는 것을 의미합니까? – Milo