CSS 레이아웃 높이

Question

나는 <div> 내부에 두 개의 열이 필요

:

<div id="corpo"> 
    <div id="corpo_esquerdo"> 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
    </div> 

    <div id="corpo_direito"> 
     direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd 
     fasdf asd fasd fasd fasdfa sdfa 
    </div> 

</div> 

현재 CSS를

현재 HTML

#corpo { 
    border: 5px #ffe4c4 solid; 
    width: 980px; 
    margin: -30px auto; 
    background-color: #f5f5f5; 
    border-radius: 5px; 
    padding: 15px; 
    color: #a8a8a8; 
    font-size: 20px; 
} 

#corpo_esquerdo { 
    width: 650px; 
    float: left; 
    border: #bababa solid 2px; 
} 
#corpo_direito { 
    width: 300px; 
    float: right; 
    background-color: #bababa; 
    border-radius: 5px; 
    color: #f5f5f5; 
    padding: 5px; 
} 

그러나 div#corpo_esquerdo 및 div#corpo_direito는 div#corpo 교차 .

어떻게 div#corpo_esquerdo 및 div#corpo_direito가 div#corpo 교차하지 않는 갖기 위해, 그것을 할 수 있습니까?

Answer 1

또한 오버 플로우 추가 할 수 있습니다 : 여기

<div id="corpo"> 
    <div id="corpo_esquerdo"> 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
    </div> 


    <div id="corpo_direito"> 
     direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd 
     fasdf asd fasd fasd fasdfa sdfa 
    </div> 
    <div style="clear:both"></div> 

</div> 

는 데모입니다 #corpo의 DIV에 자동

#corpo { 
    overflow:auto; 
    border: 5px #ffe4c4 solid; 
    width: 980px; 
    margin: -30px auto; 
    background-color: #f5f5f5; 
    border-radius: 5px; 
    padding: 15px; 
    color: #a8a8a8; 
    font-size: 20px; 
} 

참조 그 결과는 다음과 같습니다 : http://jsfiddle.net/nF5vZ/

Answer 2

IMO 가장 효율적인 방법은, 부모가 아이를 맞게 확장됩니다 떴다 어린이를 포함하는 부모 컨테이너에 overflow:hidden을 적용하면 오버 플로우 속성을

#corpo_esquerdo { 
    width: 650px; 
    float: left; 
    border: #bababa solid 2px; 
    overflow: hidden; 
} 

Answer 3

을 적용하는 것입니다. 추가

#corpo { 
    overflow: hidden; 
    /* the rest of your definition */ 
} 

Answer 4

보십시오 : 당신의 #corpo_esquerdo 및 #corpo_direito 된 div에

overflow:hidden; 

. 이 같은 내용을 삭제

Answer 5

봅니다 :

<div id="corpo"> 
    <div id="corpo_esquerdo"> 
    your text 
    </div> 
    <div id="corpo_direito"> 
    your text 
    </div> 
    <!-- clear --> 
    <div style="clear:both;"></div> 
</div> 

Answer 6

두 가지가 여기에 갈 수 있습니다.

하나 - 다른 사람이 지적한대로 부모 테두리 밖의 내용을 숨기려면 overflow:hidden을 사용하십시오.

두 - 컨테이너 내의 부유 요소로 인해 접기 효과가 발생합니다. 아이디어는 떠 다니는 요소가 자연스러운 페이지 흐름 (절대적으로 배치 된 항목처럼)에서 제거된다는 것입니다. 그런 다음 항목의 높이가 부모 요소를 수직으로 확장하지 않습니다.

부모의 높이를 늘리려면 부모 요소에 apply clearfix 클래스를 사용하십시오. (기타가 언급 한 바와 같이)

ie: <div id="corpo" class="clearfix"> 

/* For modern browsers */ 
.clearfix:before, 
.clearfix:after { 
    content:""; 
    display:table; 
} 

.clearfix:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.clearfix { 
    *zoom:1; 
} 

또한인가 clear:both CSS의 rulle와 자연 페이지 플로우 여전히 플로트 요소 아래에 다른 요소를 삽입 할 수있다. 나는이 솔루션을 좋아하지 않는다. 왜냐하면 당신이 관계없는 요소들을 사용해야 만하기 때문이다.당신이 당신의 외부 DIV 닫기 전에

Answer 7

<div style="clear:both"></div>을 추가 http://jsfiddle.net/MU7hn/

Answer 8

jsFiddle에 솔루션을 체크 아웃 : http://jsfiddle.net/Rzw44/

그것은 기본적으로 를 포함하는 부모 div에 clearfix 적용은div의 아이들을 떴다.

당신은 솔루션에 대한 자세한 내용을보실 수 있습니다 here