自動設置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的

$("#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;
}