div의 자동 세트 높이

Question

div의 격자가 표시되며 각 div의 내용은 사용자의 작업에 따라 다를 수 있습니다. 새 콘텐츠가 div에 추가되면 업데이트 된 div가 아래 div와 겹칩니다.

Freewall jquery 플러그인을 사용해 보았지만 어떻게 든 높이를 동적으로 설정할 수 없었습니다.

샘플 코드를 아래 링크를 참조하십시오 http://jsfiddle.net/Pj6e6/

HTML

<div id="holder"> 
    <div id="one" class="item">Item 1</div> 
    <div id="two" class="item">Item 2</div> 
    <div id="three" class="item">Item 3</div> 
    <div id="four" class="item">Item 4</div> 
    <div id="five" class="item">Item 5</div> 
</div> 

<div id="clearer"></div> 

<br/> 
<br/> 

<input type="button" value="Add to Item 1" id="add_one" /> 
<input type="button" value="Add to Item 2" id="add_two" /> 
<input type="button" value="Add to Item 3" id="add_three" /> 

CSS

/* The width of container DIV */ 
#holder { 
    width:400px; 
} 
/* Style for each floated item */ 
.item { 
    /* Give the distance for floated items */ 
    margin:2px 2px 2px 2px; 
    float:left; 
    /* Width and height for each item */ 
    width:100px; 
    height:100px; 
    /* Text align and background color */ 
    text-align:center; 
    background-color:#cdc; 
} 
/* Clear the "float" style */ 
#clearer { 
    clear:both; 
} 

jQuery를

01 23,516,

$("#add_one").click(function() { 
    $("#one").html('Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >Item 1<br/ >'); 
}); 

$("#add_two").click(function() { 
    $("#two").html('Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >Item 2<br/ >'); 
}); 

$("#add_three").click(function() { 
    $("#three").html('Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >Item 3<br/ >'); 
}); 

존

Answer 1

당신은 열을 사용할 수 있습니다. JSfiddle

HTML

<div class="column"> 
    <div id="one" class="item">Item 1</div> 
    <div id="two" class="item">Item 2</div> 
</div> 

<div class="column"> 
    <div id="three" class="item">Item 3</div> 
    <div id="four" class="item">Item 4</div> 
</div> 

<div class="column"> 
    <div id="five" class="item">Item 5</div> 
</div> 

CSS

.column { 
    float: left; 
    width: 104px; 
    height: 204px; 
} 

.item { 
    margin:2px 2px 2px 2px; 
    width:100px; 
    min-height: 100px; 
    text-align:center; 
    background-color:#cdc; 
} 

#clearer { 
    clear:both; 
}