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;
}

自动设置div的高度

1 个答案: