自動設置div的高度

我正在顯示div的網格，並且每個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/ >'); 
});

約翰

來源

2014-04-03 johnk1

你嘗試過一個固定高度的'最小height'instead？ – Mathias

如果一個細胞長得更大，你是否期待整行增長？ – malkassem

@Mathias我喜歡你的解決方案，但在我的情況下，下面的div移動到一邊而不是移動到下面。 – johnk1

你可以使用的列。 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; 
}

來源

2014-04-03 19:50:29 alexP

不錯！感謝alexP。 – johnk1

自動設置div的高度

回答

相關問題