HTML可变div高度与静态宽度很多divs

-1

我认为每个人都知道这个网站http://pinterest.com/，我不想创建这样的网站，但我有另一个目的，我想在静态宽度和高度始终在div下创建div可变的价值。HTML可变div高度与静态宽度很多divs

我做了HTML代码在这里，它是：http://jsbin.com/ihekiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    div{ 
     margin: 5px; 
    } 
    .width-200{ 
     width: 200px; 
    background-color: #FCF; 
    } 
    .float-left{ 
     float: left; 
    } 
</style> 


</head> 

<body> 

    <div class="width-200 float-left color-01" style="height: 300px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

    <div class="width-200 float-left color-01" style="height: 250px;"> 
    </div> 

</body> 
</html>

在我的HTML代码，你可以清楚地看到下一个DIV我怎么可以这个div 5格一个格下5不去。可能是这个div会改变它的高度可能有些div会改变它的高度现在我想知道当divs高度变化时我该如何做到这一点。你能告诉我如何做到这一点吗？

来源

2012-06-12 dgwkgg

它不可能与CSS。 jquery插件：http：//www.wookmark.com/jquery-plugin – SVS

CSS can't do this，因为您的列数可变。

相反，使用jQuery砌体：http://masonry.desandro.com/

还有一个无框架的版本，香草砌体：http://vanilla-masonry.desandro.com/

来源

2012-06-12 15:10:20 thirtydot

我唯一能件事是

body { 
-webkit-column-count: 5; 
-webkit-column-gap: 0px; 
-webkit-column-width: 200px; 
}

这不是一个好解决方案，并只支持webtkit。

来源

2012-06-12 17:59:58

HTML可变div高度与静态宽度很多divs

回答

相关问题