두 열 레이아웃이 제대로 작동하지 않습니다.

두 열 레이아웃을 사용하여 HTML 페이지를 만들려고합니다.두 열 레이아웃이 제대로 작동하지 않습니다.

나는 내가 innerContainer을위한 최고의 마진을 준 내부 container.Though에 대한 위쪽 여백을 설정할 수 없습니다입니다

http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/

jsfiddle

의 버전이 그것에 반영되지 페이지.

왼쪽 사이드 바 및 innerContainer를 포함하기 위해 내부 컨테이너를 사용하는 이유는 실제 페이지에서 내부 컨테이너에 나란히 두 개의 div가 있습니다. 3 열 레이아웃을 사용하는 것을 선호하지 않습니다. 그 이유.

출처

2012-01-31 Bobby Francis Joseph

질문에 항상 관련 코드를 입력하십시오. 링크는 훌륭하지만 그들이 사라지면 질문이 더 이상 다른 사람들에게 유용하지 않습니다. –

문제가 여백 축소입니다. 테두리 또는 패딩을 사용하여 여백이 접히는 것을 방지 할 수 있습니다. 오프닝 누락되어 http://reference.sitepoint.com/css/collapsingmargins

http://jsfiddle.net/eFMpJ/46/

#outerContainer 
{ 
    background-color:#FFF000; 
    margin:10px 10px 10px 10px; 

    border-top: 1px solid black; 
    // or padding-top: 1px; 
}

출처

2012-01-31 04:33:11

감사. 문제가 해결되었습니다. 따라서 마진이 붕괴됨에 따라 수직으로 나란히 배치 된 div의 두 마진 값 중 큰 값이 취해집니다. 이것은 부모와 자식의 경우이므로 마진의 큰 부분이 적용됩니다. 이걸 한번보세요. http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/61/이 경우에는 innerContainer에 150 픽셀의 상단 여백을 적용했습니다. 하지만 두 값 (150px, 0에서 150px까지) 중 큰 값이 선택되어 parent (outerContainer)에 적용됩니다. 관찰에 대한 나의 설명이 옳은가? 그냥 내 이해를 확인. –

예, 부모 항목에 테두리 또는 패딩을 넣으면 접기가 중지되고 여백이 독립적으로 처리됩니다. –

우선 닫는 사업부의 : 여기 좋은 설명이있다. 그런 다음 outerContainer에 10px의 패딩 윗부분을 추가했습니다.

#outerContainer 
{ 
    background-color:#FFF000; 
    margin:10px 10px 10px 10px; 
    padding-top: 10px; 

}

나는 이것이 당신의 문제를 해결할 것이라고 생각합니다. 결과가 무엇인지 알려주세요.

출처

2012-01-31 04:40:19

안녕하세요, @James – Murtaza

의 답변을 복사하지 않으셨습니까? @James와 저도 동시에 문제를 해결할 수 있습니다. –

두 열 레이아웃이 제대로 작동하지 않습니다.

답변

관련 문제