html 세로 줄 바꿈 페이지 흐름

Question

사전 순 목록의 범위가 있습니다. 인라인 블록, 그들은과 같이 표시됩니다 :

+------+------+------+ 
    | a | b | c | 
    +------+------+------+ 
    | d | e | f | 
    +------+  +------+ 
    | g |------+ 
    +------+ 

을 그리고 넓은 페이지 수로 이동합니다 내가 그들의 무리를 만드는 경우 일반적으로 HTML을, 디스플레이를 말한다.

은 다음과 같이 다음 칼럼으로 이동, 내가 대신 고정 된 높이를 가질 수 있고,가 가득 때까지 다음 아래로 스택 얼마나 : 그 사각형의 각이 포함 된 요소입니다

+------+------+------+ 
    | a | d | f | 
    +------+------+------+ 
    | b | e | g | 
    +------+  +------+ 
    | c |------+ 
    +------+ 

.

제한된 예입니다. 특히 3 가지로 높이는 것을 원하지 않습니다. 주어진 수직 공간을 채우지 않고 다음 열로 넘어가는 것을 원하지 않습니다.

Answer 1

A는 매우 가까운 게시물은 같은 (% 3) 세 번째마다 닫은 후 Column layout in HTML(5)/CSS

내가 열이 말하는 출력 루프에 어딘가에 카운터를 추가해야 할이 작업을 수행하는 방법과 여기에있는 열을 선택하고 플로트를 지 웁니다. 구조는 다음과 같습니다.

<div class="myWrapper"> 

    <div class="col1"> 
     <div>a</div> 
     <div>b</div> 
     <div>c</div> 
    </div><!--col1--> 
    <div class="clear"></div><!--clear--> 

    <div class="col2"> 
     <div>d</div> 
     <div>e</div> 
     <div>f</div> 
    </div><!--col2--> 
    <div class="clear"></div><!--clear--> 

    <div class="col3"> 
     <div>g</div> 
     <div>h</div> 
     <div>i</div> 
    </div><!--col3--> 
    <div class="clear"></div><!--clear--> 

</div><!--myWrapper--> 

.myWrapper{} 
    .myWrapper > div{ float:left; width:30%; margin-right:1%; } 
    .myWrapper > div:last-child{ margin-right:0; } 
     .myWrapper div[class*='col'] > div{ max-height:200px; margin:10px 0; } 
.clear{ clear:both; }