Div 태그 안의 div 태그가 Firefox 또는 Chrome에서 작동하지 않습니다.

이것은 매우 간단하지만 Firefox 또는 Chrome에 올바르게 표시되지 않는 이유는 div 태그를 컨테이너 div 태그 안에 넣을 수 없습니다. , 하지만 IE6에서 작동합니까 ??? ???Div 태그 안의 div 태그가 Firefox 또는 Chrome에서 작동하지 않습니다.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body> 
<div id="container"> 
    <div id="nav"> 
     <p>Hello</p> 
    </div> 
</div> 
</body> 
</html>

CSS :있는 style.css

body { 
    background:white; 
    font-family: sans-serif; 

} 
#container { 
    margin:0 auto; 
    width:960px; 
    background:#e3e3e3; 
    border:1px solid black; 
} 
#nav { 
    padding:10px; 
    margin-top:10px; 
    float:left; 
    width: 400px; 
    height:100px; 
    background:white; 
    border:1 px solid black; 
}

를 컨테이너가 it..what주는 내부의 DIV 태그로 확대되지 않은 것처럼 그건 다음과 같이 코드는?

출처

2011-09-15 Alkemee

이것은 사람들이 CSS과 얼굴 일반적인 문제입니다. 당신이 무언가를 뜨면, 부모님은 당신이보고있는 것처럼 무너집니다. 다음과 같은 방법으로이를 해결할 수 있습니다 숨기거나 오버 플로우 :

컨테이너
풋 오버 플로우에 명시 적으로 높이를 자동 컨테이너에
clearfix 해킹 사용 http://nicolasgallagher.com/micro-clearfix-hack/

을

대부분의 경우 # 2가 가장 쉽고 최상이라고 생각합니다. 오버플로시 # 3을 사용하십시오. 숨김/자동에는 바람직하지 않은 부작용이 있습니다.

출처

2011-09-15 18:42:31

와우 덕분에 이런 간단한 일들을 잊어 버렸습니다. 웹 개발에 착수했습니다. 기본 트릭을 놓쳤습니다. – Alkemee

이것은 CSS의 이상한면입니다. 한 번 이해하면 다른 몇 가지 단점이 있습니다. –

overflow: hidden은 #container입니다.

이것은 부동의 한 가지 알려진 제한 사항입니다.

전 : http://jsfiddle.net/N669N/
후 : http://jsfiddle.net/N669N/1/

출처

2011-09-15 18:40:34

이유 투표가? –

#nav div의 왼쪽을 부유하기 때문입니다. 떠 다니는 요소는 플로팅을 지우고 그 아래에 상자를 고정시키지 않으면 부동입니다. 높이가 없습니다.

.clear { clear: both }

그리고 부동 div 아래에 div를 추가하여 삭제하십시오.

<div id="container"> 
    <div id="nav"> 
     <p>Hello</p> 
    </div> 
     <div class="clear"></div> 
</div>

는 clearfixes에 매우 상세한 대답이 SO 질문을 참조 : What methods of ‘clearfix’ can I use?는

출처

2011-09-15 18:42:01 smdrager

이 방법이 효과적이지만 추가 마크 업이 바람직하지 않은 것으로 나타났습니다. 특히이를 요구하지 않는 대체 방법이있는 경우에는 더욱 그렇습니다. –

동의 함. 가장 좋은 clearfix 해킹에 관한 질문에 대한 링크로 내 대답을 편집했습니다. – smdrager

Div 태그 안의 div 태그가 Firefox 또는 Chrome에서 작동하지 않습니다.

답변

관련 문제