自动设置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的高度

回答

相关问题