플로팅 된 div 이후에 공백을 채우십시오.

Question

첫 번째 행에 3 개의 플로팅 div가 있고 두 개의 첫 번째 div는 높이가 100px이고 세 번째 div는 200px입니다. 첫 번째 행 뒤에 추가 한 내용은 세 번째 div에서 생성 된 공백을 채우지 않습니다.

CSS :

#container { 
    overflow: hidden; 
    width: 440px; 
    margin: -5px; 
} 

#container div { 
    background-color: gray; 
    height: 100px; 
    width: 100px; 
    margin: 5px; 
    float: left; 
} 

#container #widget2 { 
    width: 210px; 
} 

#container #widget3 { 
    height: 200px; 
} 

HTML : 6 그 WIDGET4 멀리하고 그것은 일반적으로 이상한 보이는, 그래서 어떻게 든 사용할 수없는 공간을 만들어 WIDGET3

<div id="container"> 
    <div id="widget1">1</div> 
    <div id="widget2">2</div> 
    <div id="widget3">3</div> 
    <div id="widget4">4</div> 
    <div id="widget5">5</div> 
    <div id="widget6">6</div> 
    <div id="widget7">7</div> 
</div> 

.

당신은 내가 여기 무슨 뜻인지 볼 수 있습니다

http://jsfiddle.net/SGdG3/80/ 내가 공백을 사용하기까지 빨간색 상자는 "밀어"가되고 싶어요.

Answer 1

기본적으로 플로팅 요소의 동작 방식입니다. 공간을 채우고 싶다면 Javascript로 절대 위치 지정을해야합니다. 귀하의 솔루션을위한 아름다운 JQuery 플러그인이 있습니다.