위치 : 절대 안쪽 위치 : 상대적으로 내용이 겹칩니다.

Question

main 요소가 있습니다. position: relative으로 설정했습니다. 여기에는 div 두 개가 포함되어 있으며 그 다음에 position: absolute을 적용합니다. 이렇게하면 main 요소를 샌드위치하는 머리말과 꼬리말이 서로 충돌하게됩니다. 이걸 어떻게 막을 수 있니?

플로트를 사용하고 바닥 글을 지우면 내가 원하는 두 열 레이아웃을 제공하는 것 같습니다. 하지만 나는 IE6/7에서 어떻게 "튼튼한"솔루션이 될지 잘 모르겠습니다.

코드 codepen.

Answer 1

main에있는 모든 요소는 절대적으로 배치되므로 main의 높이가 0으로 계산되므로 머리글의 아래쪽 가장자리는 바닥 글의 위쪽 가장자리 옆에 있습니다. main에 높이를 추가하면 머리말과 꼬리말 사이에 공백이 생깁니다.

주어진 다음의 HTML :

<header>Header</header> 
<main> 
    <div id="text"> 
    <p>Some text</p> 
    </div> 
    <div id="links"> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
    </ul> 
    </div> 
</main> 
<footer> 
    <p>Footer</p> 
</footer> 

다음 CSS와 같이 수레를 사용하여 두 개의 열 레이아웃을 실현할 수 있습니다 : 당신은 당신의 main 용기에 overflow: auto을 설정해야

main { 
position: relative; 
height: auto; 
overflow: auto; 
border: 1px solid blue; 
} 

#text { 
float: left; 
width: 500px 
} 

#links { 
float: left; 
width: 400px; 
} 

부동 소수점을 포함합니다 (이를 지우는 것과 같습니다).

또한, 플로팅 요소의 너비가 너무 넓지 않도록하십시오. 그렇지 않으면 화면 크기가 너무 좁 으면 두 번째 줄로 감싸 야합니다. http://codepen.io/anon/pen/gGsjd

각주에서

참조 데모 : 투명 대 자동차 : 오버 플로우를 사용하여 두

내가 overflow: auto을 사용하는 경향이

하지만하여 clear 속성이 필요한 것입니다 경우도있다. 어느 시점에서 "블록 서식 지정 컨텍스트"에 대한 내용은 http://www.w3.org/TR/CSS2/visuren.html#block-formatting입니다. 한 가지 방법을 선택하는 이유는 약간 미묘한 데, 그 선택은 달성하려는 레이아웃의 세부 사항, 반응 형 방식 등등.