Float가 중첩하는 Divs를 만듭니다.

두 개의 div (하나는 다른 하나의 내부에 있음)가 있는데, 하나의 내부를 "왼쪽"으로 떠올리게 할 때 약간의 문제가 발생합니다. 문제는 바깥 쪽 div가 안쪽 div 안에있는 텍스트에 맞게 높이를 확장하지 않는다는 것입니다. 이것은 아마도 매우 혼란 스럽기 때문에, 나는 약간의 코드로 설명하려고 노력할 것이다.Float가 중첩하는 Divs를 만듭니다.

HTML :

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS :

#div2 { 
    float: left; 
    width: 10px; 
}

차라리이 테스트 때이를 테스트 할 수있는 기회가되지 않아 실제로 내 문제를 보여줍니다 바랍니다. 내 실제 코드에는 필요한 경우 이러한 속성을 추가로 제공합니다.

출처

2009-06-21 PF1

클리어 픽스를 사용해야합니다. 플로팅 된 div 다음에 포함 div 내에 다음을 삽입하십시오.

<div class="clear"></div>

다음과 같은 스타일을 추가 :

.clear { clear:both; }

예 :

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

출처

2009-06-21 03:49:03 Sampson

감사합니다. 조나단 : 이것은 훌륭했습니다! – PF1

당신 천재 :) 그 일 –

그것은 수정되지 않습니다. 그것은 분명합니다. 당신은 단지 부동을 지울 필요가 :) –

(세 번째 시간 오늘 :-)) 외부 DIV 오버 플로우를 제공합니다 : 숨겨진;
및 너비. 당신이 당신의 HTML에 추가 마크 업을 추가하거나 외부 DIV에 폭을 추가하지 않으려면

출처

2009-06-21 03:49:55

정말요? 정말 유감입니다. 다른 사람들이 동일한 문제를 더 잘 표현할 수 있도록 내 검색어를 변경해야한다고 생각합니다. – PF1

... 또는 auto –

높이가 커지도록 요소에 너비를 추가하면 CSS 코드를 읽기가 어려워 지므로 그 코드가 현명한 해결 방법인지는 의문입니다. 확대/축소 : 1 솔루션을 추측 할 수 있지만 아마 w3c css 유효하지 않습니다. 오버플로 : 숨겨진 좋은 솔루션이지만 내용을 숨기기 위해 오버플로가 아니라 요소의 크기가 커지도록하기 때문에 CSS를 읽기가 어렵게 만듭니다. – Michiel

, 당신은 사용할 수 있습니다 : 어쩌면 편리한

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

출처

2009-06-21 11:45:12 Emily

오버플로 : IE6에서도 숨겨진 것으로 생각 했나요? – alex

Nope. IE6의 float를 지우려면 hasLayout을 호출해야합니다. 요소에 위치, 부동, 표시, 너비, 높이 또는 확대/축소를 지정하면됩니다. 너비 또는 높이를 지정하면 hasLayout을 호출하는 가장 일반적인 방법이지만 치수를 지정하지 않고 확대/축소가 가장 투명 할 때도 있습니다. 자세한 내용은 hasLayout.net을 참조하십시오. – Emily

아 - 디스플레이 추가 : 일반적으로 플로팅 요소가 포함 된 모든 것을 차단합니다. – alex

을 또한 잘 알고 clearfix 코드가 있음을 유의 이 문제에 대해 특별히 작성된 positioniseverything에서 발생하며 어떤 상황에서도 가장 강력하고 적용하기 가장 쉽습니다.

당신이 다음을 수행 할 상황에서 사용하기 위해

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

출처

2009-06-21 17:47:18 Michiel

신장 : 1 %가 내 모든 문제를 해결했습니다. 왜 그래도. 꼬리 부분에 2 개 이상의 부동 요소가있는 일련의 부동 요소와 관련하여 설명 할 수 있습니까? – Emanegux

솔루션은 위의 작업을해야하지만, 내가 하나가 있다는 지적 가치가 파악 다음과 같이 CSS 보인다 내가 아직 보지 못했던 마법의 속임수 (이 실에서).

그냥 왼쪽으로 # div1 부동입니다. 부모 요소를 플로팅하면 자동으로 자식 요소가 지워집니다 - 실제로 유용합니다. 떠 다니는 스택의 전체 레이아웃을 빌드 한 다음 마지막에 마지막으로 명확하게 만들면 상당히 안정적입니다.

출처

2009-06-22 08:26:18

불행히도 수레는 매우 중독성이 있습니다. 드물게 사용하고 이상한 오버 플로우를 뿌리는 것이 가장 좋습니다 : 숨겨진; – GlennG

Float가 중첩하는 Divs를 만듭니다.

답변

관련 문제