플로트 요소/아래 서로

Question

내 코드 옆에 http://jsfiddle.net/p796z/1/

HTML

<div class="box1"> 
    <p>Content Content</p> 
    <p>Content Content</p> 
    <p>Content Content</p> 
</div> 

<div class="box2"> 
    <p>Content Content</p> 
</div> 

<div class="box2"> 
    <p>Content Content Content Content Content Content</p> 
</div> 

<div class="box2"> 
    <p>Content Content</p> 
</div> 

CSS가 세 번째 노란 위의 예에서 볼 수 있듯이

.box1 { background:red; float:left; width:50% } 
.box2 { background:yellow; float:left; width:25%; } 

상자는 다른 상자 아래에 있지만 첫 번째 노란색 상자 사이에 빈 공간을 남겨 둡니다. 왜냐하면 초 ond 노란색 상자가 더 큰 높이를 가지고 있습니다. 제 질문은 두 번째 노란색 상자의 높이가 무엇이든 관계없이 첫 번째 노란색 상자 다음에 세 번째 노란색 상자가 오도록 만드는 방법입니다.

Answer 1

위의 HTML에만 국한되지 않는 경우 다른 div의 첫 번째 .box2 div를 감쌀 수 있으며 그 대신에 부동 상태로 둘 수 있습니다. 너비를 25 %로 지정하십시오. 아래 예를 볼 수 있습니다. 일반적으로

.box1 { background:red; float:left; width:50% } 
.box2 { background:yellow; float:left; width:25%; } 
.box3{ float:left; width:25%; } 
.box4 { background:yellow; float:left; width:100%; } 

<div class="box1"> 
    <p>Box 1</p> 
    <p>Content Content</p> 
    <p>Content Content</p> 
</div> 

<div class="box3"> 
    <div class="box4"> 
     <p>Box 4</p> 
     <p>Content Content</p> 
    </div> 

    <div class="box4"> 
     <p>Box 4</p> 
     <p>Content Content Content Content Content Content</p> 
    </div> 
</div> 

<div class="box2"> 
    <p>Box 2</p> 
    <p>Content Content</p> 
</div>