CSS float div가 정상적으로 작동하지 않습니다.

Question

main이라는 컨테이너 div가 있고 두 개 div가 왼쪽으로 떠있었습니다. 문제는 내가 볼 수있는 주요 div 배경색이 필요합니다 (나는 남아있는 300px 오른쪽에 파란색 배경이 표시되어야한다고 가정하고 왼쪽 div보다 하위 div이므로 중간 div의 4 번째 줄에 남아 있습니다.). 또한 왼쪽 및 중간 div가 자동으로 단어 배치에 대한 높이를 높이고 회색 (중간) div에서는 작동하지 않는 것을 볼 수 있습니다.

.clear { 
    clear: both; 
} 

:

<div class="main"> 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
    <div class="clear"></div> 
</div> 

그런 다음 클래스 명확한 스타일을 제공 :

는 http://jsfiddle.net/djqfo3we/2/

.main { 
    width: 500px; 
    background-color: blue; 
} 

.left { 
    width: 100px; 
    float: left; 
    background-color: red; 
} 
.middle { 
    width: 100px; 
    float: left; 
    background-color: gray; 
} 

<div class="main"> 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
</div> 

Answer 1

는 주요 사업부 내부 사업부를 추가하지만 하단에 분명라고보기 당신은 이것을 얻습니다 : http://jsfiddle.net/djqfo3we/4/

편집 : 다른 사람들이 지적했듯이, 너비가 설정된 너비 내에 머무를 수 있도록 줄 바꿈을 적용하려면 포장 할 내용에 word-wrap: break-word; 스타일을 추가하십시오.

본부 div의 중간 및 왼쪽 div에 모두 단어 줄 바꿈을 적용했습니다.

업데이트 jsfiddle : http://jsfiddle.net/djqfo3we/10/

.main { 
 
    width: 500px; 
 
    background-color: blue; 
 
} 
 

 
.left { 
 
    width: 100px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 

 
.middle { 
 
    width: 100px; 
 
    float: left; 
 
background-color: gray; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.middle, .left { 
 
    word-wrap:break-word; 
 
}

<div class="main"> 
 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
 
    <div class="clear"></div> 
 
</div>

Answer 2

당신은 그렇지 않으면 수레 부모 붕괴의 여백을 취소해야하고 부모가 더 높이가없는 것으로 보인다.

은 삭제 수레을위한 다양한 기술이 있고 당신이 긴 텍스트 문자열이 스스로 중단하지 않습니다 발견했습니다 당신은 간단한 검색 텍스트 배치에 관해서는

더 찾을 수 있습니다.

word-wrap:break-word을 사용하여 강제로 단어 나누기를 적용하고 원본 텍스트를 변경하지 않을 수 있습니다.

.main { 
 
    width: 500px; 
 
    background-color: blue; 
 
    overflow: hidden;  /* quick clearfix */ 
 
} 
 
.left { 
 
    width: 100px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
.middle { 
 
    width: 100px; 
 
    float: left; 
 
    background-color: gray; 
 
    word-wrap:break-word; 
 
}

<div class="main"> 
 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
 
</div>