javascript - 自动设置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;
}