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

回答

相關問題