래퍼 div가 하나의 div와 두 개의 div를 래핑하지 않는 이유는 무엇입니까? (Firefox 브라우저에서)

래퍼 div가 하나의 div와 두 개의 div를 래핑하지 않는 이유는 무엇입니까? (Firefox 브라우저에서)래퍼 div가 하나의 div와 두 개의 div를 래핑하지 않는 이유는 무엇입니까? (Firefox 브라우저에서)

<html> 
<head> 
<style> 
#wrapper {position:relative; background:red; border:solid 1px green;} 
#one {position:absolute; top:0; left:10px; width:30%; border:solid 1px blue;} 
#two {position:absolute; top:0; right:0; width:30%; border:solid 1px yellow;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="one">111</div> 
<div id="two">222</div> 
</div> 
</body> 
</html>

출처

2009-09-02 Anonymous

원하는 효과는 무엇입니까? 래퍼 div가 다른 두 div를 래핑하도록하려면 어떻게해야합니까? –

"포장하지 않음"으로 의미하는 것을 지정할 수 있습니까? – Residuum

기술적으로 래퍼 div에 내용이 없기 때문에. 모든 요소는 절대적으로 (래퍼의 마음에 비례하여) 배치되어 있으므로 높이를 얻는 내용이 없습니다.

두 개의 하위 div를 플로팅 한 경우에도 동일한 효과를 얻을 수 있습니다.

포장재에 overflow: hidden을 넣고 래퍼에 명시적인 높이를 지정하거나 "실제"일부 콘텐츠를 제공 할 수 있습니다.

출처

2009-09-02 13:59:10 cletus

이유는 절대적으로 그 위치에 있기 때문입니다. 이것은 div의 흐름에서 그것들을 제거하고 결과적으로 공간을 차지할 div가 없으므로 아래쪽 경계가 붕괴됩니다. 당신이 된 div를 떠 경우에도 발생하지만, 당신이 얻을 수있는 솔루션들이있다 플로트 때 사업부는 당신을 위해 트릭을 할해야

#wrapper {position:relative; background:red; border:solid 1px green;} 
#one {float:left; width:30%; border:solid 1px blue;} 
#two {float:right; width:30%; border:solid 1px yellow;} 


<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div style="clear:both"></div> 
</div>

을 포장.

출처

2009-09-02 13:59:31 Zoidberg

래퍼 div가 하나의 div와 두 개의 div를 래핑하지 않는 이유는 무엇입니까? (Firefox 브라우저에서)

답변

관련 문제